前端优化：图片延迟加载（适合首屏以外的内容）

原理：先用一张极小的图片来代替，等到内容加载完了，再向服务器请求真正的图片并替换，可以有效的减少等待时间。

实现:

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="a.jpg">

function loadImage(){
    var deferImages=document.getElementsByTagName('img');
    var curImg;
    var imgSrc;
    for(var i=0,len=deferImages.length;i<len;i++){
        curImg=deferImages[i];
        imgSrc=curImg.getAttribute('data-src');
        if(imgSrc){
            curImg.setAttribute('src',imgSrc);
        }
    }
}

window.onload=loadImage;

这对于延迟加载首屏以后的内容很有用，提高加载速度。懒加载可以减少请求数(有可能不会去加载)或者延迟请求，减缓了服务器端的压力。

可以有多种实现方式：

1、使用settimeout或setinterval进行延迟加载，如果用户在加载前离开了，就不会去加载了。

2、有条件的加载，当符合某个条件或者触发了某个事件才开始异步下载。

3、可视区加载，仅加载用户可看到的区域，通过监控滚动条事件来加载图片。在距用户看到某图片一段距离前便开始加载，这样当用户往下拉的时候刚好可以看到图片。

转载于:https://www.cnblogs.com/yanyd/p/4558833.html