JS-懒加载（原生）-- php培训十期线上班

JS-tab标签页（原生）

关于案例

当前案例，还存在一个小问题，就是页面加载如果不滚动一下鼠标，就一直是默认图片，不过懒加载的原理还是能看出来滴，多多包涵哦！

JS代码中有一些说明注释，可以详细看一下哦！

运行效果

案例代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS基础-懒加载的原理与范例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #cccccc;
        }
        h2{
            line-height: 30px;
            text-align: center;
            margin: 10px auto;
        }
        img{
            width: 400px;
            height: 400px;
            border: 1px dashed #cccccc;
            margin-bottom: 10px;
            display: block;
        }
        .lazy-container{
            width: 400px;
            background-color: #ffffff;
            margin: 0 auto;
            padding: 20px;
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <h2>懒加载-范例</h2>
    <div class="lazy-container">
        <img src="images/temp.jpg" alt="" al="" data-src="images/1.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/2.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/3.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/4.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/5.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/6.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/7.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/8.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/9.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/10.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/11.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/12.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/13.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/14.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/15.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/16.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/17.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/18.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/19.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/20.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/21.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/22.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/23.jpg">
        <img src="images/temp.jpg" alt="" al="" data-src="images/24.jpg">
    </div>
    <script src="js/lazy.js"></script>
</body>
</html>

lazy.js

/**
 * 概念：
 * 1-可视区：我们可以直接看见的 页面内容区域;
 * 2-滚动距离：可是区边框，距离文档顶部的距离
 * （一个web页面一般都存在滚动条，滚动距离就是滚出的部分）;
 * 3-相对顶部距离：就是页面元素，相对于文档顶部的距离（也就是HTML标签）;
 * 
 * 涉及属性：
 * 1-document.documentElement: 文档根节点 HTML标签;
 * 2-clientHeight: 当前元素可视区的高度；
 * 3-scrollTop: 当前元素的滚动距离；
 * 4-offsetTop: 当前元素相对顶部距离
 * 
 * 原理：
 * 1-整个页面的可视区是HTML标签的区域；
 * 2-如果当前元素的 `相对顶部距离`>= 可视区高度+滚动距离，那么就加载元素
 * 否则暂不加载；
 */
//获取所有图片
var imgs = document.querySelectorAll('img');
//获取页面可视区高度
var clientHeight = document.documentElement.clientHeight;
//滚动事件监听器
window.addEventListener('scroll',function(event){
    //获取滚动距离
    var scrollTop = document.documentElement.scrollTop;
    //遍历图片，根据是否在可视区域，替换 src属性值
    imgs.forEach(function(img){
        if(img.offsetTop<=(clientHeight+scrollTop)){
            img.src=img.dataset.src;
        }
    });
},false);

JS-tab标签页（原生）

关于案例

运行效果

案例代码

html

lazy.js

相关文章