图片懒加载的原理

原因

懒加载是一种延迟加载技术，在一个长网页中存在大量图片影响加载速度和用户体验。懒加载是一种优化网页性能的方法。大量用在电商场景中。

例如京东首页，只需要第一时间完成首屏展示的任务就可以了，其他图片可以随着网页的滚动下载就可以了。

原理

懒加载原理就是讲一次性下载全部通篇改为根据判断可是区域下载，也就是说看到哪下载到哪。

• 图片的src不设置真实的路径
• 图片的真实路径设置在其他属性中比如:data-original
• 通过js判断图片是否进入可是区域
• 如果图片进入可是区域将图片src换成真实路径

代码

1. 图片的src不设置真实的路径，真实路径设置data-original

        <img
         src=""
         class="image-item"
         lazyload="true"
         data-original="https://gitee.com/josephxia/picgo/raw/master/juejin/image-20220124221805647.png?a=1"
       />

2.通过js判断图片是否进入可是区域，如果图片进入可视区域将图片src换成真实路径

        var viewHeight = document.body.clientHeight;
        //获取可视区高度
        function lazyload() {
            console.log('load')
            var list = document.querySelectorAll("img[data-original][lazyload]");
            list.forEach((item) => {
                if (item.dataset.original === "") return;
                var rect = item.getBoundingClientRect();
                console.log('图片相对位置top', rect.top)
                // 获得图片相对浏览器视窗的位置
                if (rect.bottom >= 0 && rect.top < viewHeight) {
                    var img = new Image();
                    img.src = item.dataset.original;
                    img.onload = function () {
                        item.src = img.src;
                    };
                    item.removeAttribute("data-original");
                    //移除属性，下次不再遍历
                    item.removeAttribute("lazyload");
                }
            });
        }
        lazyload(); //刚开始还没滚动屏幕时，要先触发一次函数，初始化首页的页面图片
        document.addEventListener("scroll", lazyload);