js懒加载

李白和星星

已于 2023-06-26 18:38:25 修改

阅读量192

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-06-26 18:36:44 首次发布

本文链接：https://blog.csdn.net/qq_35469137/article/details/131403350

版权

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

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

<!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">

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

李白和星星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js懒加载

懒加载的目的就是为了提高用户体验降低服务器压力有时候我们的内容很长很多但是屏幕只有那么大一点一次加载出来全部显然是不合适的懒加载就是为了让页面显示在屏幕可视区域内再加载当前的数据像大型购物网站都有这个操作。或者可以这么写用loading占位加载 data-original是真实要加载的图片判断图片到屏幕可视区域内用data-original的值替换src 道理是一样的。先用_src占个位置到加载的时候再把_src的值赋值给src。下面以图片懒加载举例说明懒加载的过程。
复制链接

扫一扫

js懒加载

“相关推荐”对你有帮助么？