前端图片优化（二）：图片懒加载

原文地址

背景

在当前网站图片资源占比越来越重，特别是电商这类网站引入了大量的图片资源增加了网站加载的负担。大量的图片资源请求，会导致网站的加载变慢，变卡，导致首屏时间变长，甚至崩溃，影用户体验。针对同一网页中有许多图片的场景，有图片懒加载的优化方案。

原理

在一个网站中，网页的长度会远远大于浏览器的高度。而我们所能看到只能是浏览器可视区域部分的网页，在可视区域之外的部分我们如果不滑动网页是看不到的，见下图所以在网站首次加载的时候，我们可以只对浏览器可视区域部分的资源进行加载，在可视区域部分之外的当页面滑动到相应位置时再进行加载，这样会极大了减少了首屏加载的负担，提高用户体验。

实现

在img标签上新增data-src属性，该属性指向图片的真实地址，img本身的src不设置或者设置为缩略图和默认图片（缩略图和默认图片尺寸较小），通过js监听滑动事件，同过getBoundingClientRect()方法获取到图片是否处于可视区域内，如果处于则将img的src值设为data-src的值。

代码

HTML

//引用图片资源来自网络，侵权立删
<div class="lazy-load-wrap">
    <img class="lazy-img" data-src="http://img3.duitang.com/uploads/blog/201601/24/20160124092619_nXrEh.thumb.700_0.jpeg" />
    <img class="lazy-img" data-src="http://b-ssl.duitang.com/uploads/item/201804/24/20180424214451_5lJat.png" />
    <img class="lazy-img" data-src="http://b-ssl.duitang.com/uploads/item/201804/24/20180424220005_MJLwz.png" />
    <img class="lazy-img" data-src="http://b-ssl.duitang.com/uploads/item/201804/24/20180424214700_UtMaV.png" />
    <img class="lazy-img" data-src="http://b-ssl.duitang.com/uploads/item/201804/24/20180424214546_Ru3vN.png" />
    <img class="lazy-img" data-src="http://b-ssl.duitang.com/uploads/item/201704/14/20170414180218_2UFRw.jpeg" />
    <img class="lazy-img" data-src="http://b-ssl.duitang.com/uploads/item/201606/10/20160610123223_hY4jM.jpeg" />
</div>

JavaScript

window.onload = ImgCanLoad;
window.onscroll = scrollImg(ImgCanLoad);
let clientHeight = window.innerHeight;
function ImgCanLoad(){
    let imgs = document.querySelectorAll("img");
    imgs.forEach(function(img){
        if(img.getBoundingClientRect().top < clientHeight){
            img.src = img.dataset.src;
        }
    })
}
function scrollImg(fn){
    let timeInst = null;
    let that = this;
    return function(){
        clearTimeout(timeInst);
        timeInst = setTimeout(function(){
            fn.apply(that);
        }, 500);
    }
}

演示demo地址