CSS图片懒加载

一、什么是图片懒加载

图片懒加载就是延迟加载，即当对象需要用到的时候再去加载。比如加载一个页面，这个页面很长很长，长到浏览器的可视区域装不下，懒加载就是优先加载可视区域的内容，其他部分等进入了可视区再加载。
图片懒加载的好处：
（1）全部加载会影响用户的体验。全部加载浪费时间，用户不能第一时间在可视区域看到内容；
（2）浪费用户的流量，有些用户并不想全部看完，全部加载会浪费大量的流量。

二、图片懒加载的实现思路

HTML5支持使用data-前缀设置自定义属性。dataset自定义属性的格式：data-xx；前面的data-是固定的，后面的xx一般为表示与自定义属性相关的字符串。比如，img的src属性可以设置为data-src，当需要获取到这个属性时，可以用Element.data.src得到。
节流的应用：由于用户可能出现反复反复滑动的情况，因此图片不应该立刻加载，而应该使用节流适当延时执行加载操作。
所以图片懒加载很重要的就是它的判断条件，即什么时候加载这张图片？有三种方式都可以实现

三、getBoundingClientRect().top + innerHeight

getBoundingClientRect().top：元素至可视窗口的高度
window.innerHerght：可视窗口的高度
具体解释如图所示：

image.png

因此，当getBoundingClientRect().top < window.innerHeight时，应该加载图片。
具体代码：

<body>
    <div class="box">
        <ul>
            <li>
                <img data-src="img1.jpg" alt="">
            </li>
            <li>
                <img data-src="img2.jpg" alt="">
            </li>
            <li>
                <img data-src="img3.jpg" alt="">
            </li>
            <li>
                <img data-src="img1.jpg" alt="">
            </li>
            <li>
                <img data-src="img2.jpg" alt="">
            </li>
            <li>
                <img data-src="img3.jpg" alt="">
            </li>
            <li>
                <img data-src="img1.jpg" alt="">
            </li>
        </ul>
    </div>
</body>
</html>
<script>
    function imgonload() {
        let img = document.querySelectorAll("img");
        for (let i = 0; i < img.length; i++) {
            if (img[i].getBoundingClientRect().top < window.innerHeight) {
                //图片一旦有src就会加载出来，所以图片的路径不会放在src中，而是一个自定义的属性data-src中
                img[i].src = img[i].dataset.src;
            }
        }
    }

    function scollImg(fn) {
        let timer = null;
        let context = this;
        return function () {
            clearTimeout(timer);
            timer = setTimeout(() => {
                fn.apply(context);
            }, 500)
        }
    }
    window.onload = imgonload;     //html加载完毕后立即执行
    window.onscroll = scollImg(imgonload);     //每次滚轮滑动时都要触发
</script>

四、scrollTop+offsetTop+innerHeight

scrollTop：滚动了的距离；
offsetTop：元素相对父元素的位置；
innerHeight：当前浏览器可视窗口的大小。
展示的条件：scrollTop+innerHeight > offsetTop
具体解释如下：

image.png

具体代码：

function imgonload2(){
    let img = document.querySelectorAll('img')
    var innerH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    var scrollT = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    for(let i=0 ; i<img.length ; i++){
        var offsetT = img[i].offsetTop;
        console.log(innerH,scrollT,offsetT);
        if(scrollT+innerH>offsetT){
            img[i].src = img[i].dataset.src;
        }
    }
}
// 其他部分同上一节
window.onload = imgonload2;
window.onscroll = scollImg(imgonload2);

【前端知识之CSS】CSS图片懒加载

CSS图片懒加载