js懒加载

懒加载的目的就是为了提高用户体验 降低服务器压力 有时候我们的内容很长很多 但是屏幕只有那么大一点 一次加载出来全部显然是不合适的 懒加载就是为了让页面显示在屏幕可视区域内再加载当前的数据 像大型购物网站都有这个操作

下面以图片懒加载举例说明懒加载的过程

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            width: 1200px;
            list-style: none;
            margin: 0 auto;
        }

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }


        li {
            width: 23%;
            height: 200px;
            float: left;
            border: 1px solid #ccc;
            margin-bottom: 10px;
            margin-left: 10px;
        }


        img {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <ul class="clearfix">
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>
        <li><img _src="./1.gif" alt=""></li>

    </ul>
    <script>
        var liList = document.querySelectorAll("li");
        var lT = document.documentElement.clientHeight;//当前页面屏幕可视高度
        function load() {
            for (var i = 0; i < liList.length; i++) {
                var jQ = document.documentElement.scrollTop;//卷曲高度
                // 判断:这里是核心重点区域 图片到定位父元素的距离 小于 可视窗口 + 卷曲高度 
                //成立就加载src 懒加载
                if (liList[i].offsetTop < jQ + lT) {
                    liList[i].children[0].src = liList[i].children[0].getAttribute("_src");
                }
            }
        }

        window.onscroll = load
        window.onload = load
    </script>
</body>

</html>

先用_src占个位置 到加载的时候再把_src的值赋值给src

或者可以这么写 用loading占位加载 data-original是真实要加载的图片 判断图片到屏幕可视区域内 用data-original的值替换src 道理是一样的

<img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (1).jpeg">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (3).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (9).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (10).jpg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (13).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (92).jpeg"">
        <img  src="image/load.gif" alt="" data-original="image/图片 (1).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (2).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (19).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (23).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (33).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (37).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (38).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (39).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (40).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (41).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (42).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (43).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (44).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (45).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (46).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (47).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (48).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (49).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (50).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (51).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (52).jpg">
        <img  src="image/load.gif"alt="" data-original=" image/图片 (53).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (54).jpg">

其他类型的懒加载都是一样的道理 有很多很长的内容时 可以在判断到此内容在屏幕可视区域内 调该部分内容的接口 获取数据进行加载即可