原理:先用一张极小的图片来代替,等到内容加载完了,再向服务器请求真正的图片并替换,可以有效的减少等待时间。
实现:
<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、可视区加载,仅加载用户可看到的区域,通过监控滚动条事件来加载图片。在距用户看到某图片一段距离前便开始加载,这样当用户往下拉的时候刚好可以看到图片。