1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 ul{margin:0;padding:0;} 8 li{list-style:none;300px;height:168px;margin:0 auto;text-align:center;line-height:168px;margin-bottom:30px;} 9 img{} 10 </style> 11 <script type="text/javascript"> 12 window.onload = function(){ 13 window.onscroll = function(){ 14 init(); 15 } 16 init();//加载首屏，初始化 17 } 18 function init(){ 19 var lazy = 168;//预加载延迟 20 var images = document.images;//选择所有img 21 for(var i=0;i<images.length;i++){ 22 var obj = images[i]; 23 if(obj.getBoundingClientRect().top-lazy < document.documentElement.clientHeight && !obj.IsLoad){ 24 obj.IsLoad = true; 25 if(obj.dataset)//浏览器是否支持 26 imagesLoad(obj,obj.dataset.original); 27 else 28 imagesLoad(obj,obj.getAttrbute('data-original')); 29 } 30 } 31 } 32 function imagesLoad(obj,src){ 33 var img = new Image(); 34 img.onload = function(){//当图片加载完成之后，显示图片，不会出现加载卡顿现象 35 obj.src = src; 36 } 37 img.src = src; 38 } 39 </script> 40 </head> 41 <body> 42 43 <ul id="ul"> 44 <li class='lazy'><img data-original='http://zichi.date/2015/picture-lazyload/images/0.jpg' src='http://zichi.date/2015/picture-lazyload/images/loading.gif'/></li> 45 <li class='lazy'><img data-original='http://zichi.date/2015/picture-lazyload/images/1.jpg' src='http://zichi.date/2015/picture-lazyload/images/loading.gif'/></li> 46 <li class='lazy'><img data-original='http://zichi.date/2015/picture-lazyload/images/2.jpg' src='http://zichi.date/2015/picture-lazyload/images/loading.gif'/></li> 47 <li class='lazy'><img data-original='http://zichi.date/2015/picture-lazyload/images/3.jpg' src='http://zichi.date/2015/picture-lazyload/images/loading.gif'/></li> 48 <li class='lazy'><img data-original='http://zichi.date/2015/picture-lazyload/images/4.jpg' src='http://zichi.date/2015/picture-lazyload/images/loading.gif'/></li> 49 <li class='lazy'><img data-original='http://zichi.date/2015/picture-lazyload/images/5.jpg' src='http://zichi.date/2015/picture-lazyload/images/loading.gif'/></li> 50 <li class='lazy'><img data-original='http://zichi.date/2015/picture-lazyload/images/6.jpg' src='http://zichi.date/2015/picture-lazyload/images/loading.gif'/></li> 51 <li class='lazy'><img data-original='http://zichi.date/2015/picture-lazyload/images/7.jpg' src='http://zichi.date/2015/picture-lazyload/images/loading.gif'/></li> 52 <li class='lazy'><img data-original='http://zichi.date/2015/picture-lazyload/images/8.jpg' src='http://zichi.date/2015/picture-lazyload/images/loading.gif'/></li> 53 <li class='lazy'><img data-original='http://zichi.date/2015/picture-lazyload/images/9.jpg' src='http://zichi.date/2015/picture-lazyload/images/loading.gif'/></li> 54 <li class='lazy'><img data-original='http://zichi.date/2015/picture-lazyload/images/10.jpg' src='http://zichi.date/2015/picture-lazyload/images/loading.gif'/></li> 55 <li class='lazy'><img data-original='http://zichi.date/2015/picture-lazyload/images/11.jpg' src='http://zichi.date/2015/picture-lazyload/images/loading.gif'/></li> 56 <li class='lazy'><img data-original='http://zichi.date/2015/picture-lazyload/images/12.jpg' src='http://zichi.date/2015/picture-lazyload/images/loading.gif'/></li> 57 </ul> 58 </body> 59 </html>
图片的惰性加载实现方式其实很简单。
- 在 HTML 文件中将需要惰性加载的图片的 src 属性置为一个相同的地址（一般设置为一张 loading 图），这样这张图只会加载一次（第二次即会读取缓存），或者干脆置为空（用户体验不好），将真实的图片地址存储在别的属性中（比如 data-original 属性)
- 监听事件（比如 scroll 事件），判断需要惰性加载的图片是否已经在可视区域，如果是，则将 src 属性替换成 data-original 属性值