纯JS 10分钟实现图片懒惰加载

知识点：

1：h5 新增选择器 document.querySelectorAll

2:JS 经典，防抖

3：距离判断：getBoundingClientRect

思路：通过浏览器滚动事件，判断图片高度是否出现在可视化范围。如果ok 赋值图片地址src(默认是空通常地址隐藏在data-src 中)，

网上其他实现思路也是同理，实现方式不一样。

复制code保存xx.html：可直接运行看效果

code:

代码已标注详细解释，

<!DOCTYPE htm>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        /*消除css默认的间距 方便控制*/
         * { margin: 0;
             padding:0
         }
        li {
            height:800px;
            list-style:none;
            /* https://www.jianshu.com/p/e2eb0d8c9de6 */
            box-sizing: border-box;
            border:1px solid #000000
        }
        img {
            display: block;
            margin:100px auto;
        }
    </style>
</head>

<body>
<div>
    <ul class="box">
        <li> <img data-src="img/1.jpg" /></li>
        <li> <img data-src="img/2.jpg" /></li>
        <li> <img data-src="img/3.jpg" /></li>
        <li> <img data-src="img/4.jpg" /></li>
    </ul>
</div>
<script>
    //闭包
    (function() {
        var dom = {
                //h5 新增选择器
                ImgAll: document.querySelectorAll("img")
            },
            method = {
                /**
                 * window.innerHeight 获取页面的高度不包括工具栏和滚动条
                 * 获取图片地址:dom.ImgAll[i].dataset.src
                 * getBoundingClientRect().top 获取到图片到页面顶部的高度
                 */
                imgOnload: function () {
                    //这里可以在细节优化 比如已经加载的图片 判断 src 已经存在 不赋值
                    //或者 赋值完后 在dom.Img 集合里面删除当前元素
                    for (let i = 0; i < dom.ImgAll.length; i++) {
                        if (dom.ImgAll[i].getBoundingClientRect().top < window.innerHeight) {
                            dom.ImgAll[i].src = dom.ImgAll[i].dataset.src;
                        }
                    }
                },
                /**
                 * 防抖
                 * 详细介绍 https://blog.csdn.net/crystal6918/article/details/62236730
                 * https://www.2cto.com/kf/201803/728456.html
                 */
                scollImg: function(fn) {
                    let handle;
                    return function() {
                        let context = this;
                        let args = arguments;
                        // 取消之前的延时调用
                        clearTimeout(handle);
                        handle = setTimeout(function () {
                                //apply 改变当前的this 是运行时的context 除暴理解移花接木  此处imgOnload 然并若
                                //http://www.cnblogs.com/onepixel/p/5143863.html 或者阮一峰 博客 js 目录。
                                fn.apply(context, arguments);
                        }, 500);
                    }
                }
            };

        window.onload = method.imgOnload();

        //滚动事件
        window.onscroll = method.scollImg(method.imgOnload);
    })();
</script>
</body>
</html>

View Code

图片缓存查看 js个人笔记 renderCvs方法

纯JS 10分钟 实现图片懒惰加载

纯JS 10分钟实现图片懒惰加载