JavaScript原生实现图片懒加载

一、懒加载原理

一张图片就是一个

<img>

标签，浏览器是否发起请求图片是根据

<img>

的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给

<img>

的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。

二、懒加载思路及实现

实现懒加载有四个步骤，如下：

1. 加载loading图片
2. 判断哪些图片要加载【重点】
3. 隐形加载图片
4. 替换真图片

注意：判断

clientHeight+scrollTop>offsetTop

这一步是关键~(与下拉加载更多的核心是一样的)

代码如下：

var imgs = document.querySelectorAll('img');

        //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
        function getTop(e) {
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                T += e.offsetTop;
            }
            return T;
        }

        function lazyLoad(imgs) {
            var H = document.documentElement.clientHeight;//获取可视区域高度
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (let i = 0; i < imgs.length; i++) {
                if (H + S > getTop(imgs[i])) {
                //这里可以做一些异步请求 将请求的图片src赋值给当前img标签的src
                //创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载
					var temp = new Image();
					temp.src = imgs[i].getAttribute('data-src');//只会请求一次
					// onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点
					temp.onload = function(){
						// 获取自定义属性data-src，用真图片替换假图片
						imgs[i].src = imgs[i].getAttribute('data-src')
                }
            }
        }

        window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
            lazyLoad(imgs);
        }
           

参考：https://blog.csdn.net/w1418899532/article/details/90515969