所谓懒加载，是为了提高网页的打开的速度，获得更好用户体验的一种手段。其选择的重要的部分先加载，次要的部分需要的时候再加载。比如一个电商网站，首屏通常有很多的数据，清晰度较高的banner或轮播。页面非首屏部分会员很多商品夹杂着大量的图片。这是时候选择懒加载以保证首屏的流畅十分重要。

 

　　本文仅仅简单的举例图片的懒加载，是性能优化的入门的篇章，方法比较简单明了，只要有一点js基础就一定能看懂。

 

　　废话不多说

 

　　<imgsrc="img/pic_error.jpg"class="img-delay"src="img/banner.png"/>

 

　　首先，对于非首屏的图片添加了class="img-delay"和src属性，后者用来放置图片原始url地址的属性，对于图片本身的src属性，可以选择空着，或者添加一个”图片无法显示“的提示性图片，像天猫这样：

 

　　3243756297-5b954db4d9489_articlex.jpg

 

　　之后我们需要做的就是，当用户下滑到哪里就显示哪里的图片（提前一点点显示更好，这里不做提前了）

 

　　

 

　　//首先你需要引入一个jQuery库

 

　　//获取需要延迟加载的图片

 

　　var$picDelay=$(".img-delay");

 

　　//在window上监听滑动事件

 

　　$(window).scroll(function(){

 

　　varscrollTop=$(window).scrollTop();//滑块划过的距离

 

　　varscreenHeight=screen.height;//屏幕浏览器内容部分的高度

 

　　//计算每个图片的位置是否符合要求

 

　　$picDelay.each(function(idx,ele){

 

　　var$ele=$(ele);

 

　　//当scrollTop+screenHeight===ele.offsetTop时图片刚好出现上边沿

 

　　if(scrollTop+screenHeight>=ele.offsetTop){

 

　　$ele.attr("src",$ele.attr("src")).removeAttr('src').removeClass("img-delay");

 

　　}

 

　　});

 

　　//当所有图片都加载了以后，移除这个事件

 

　　if($(".img-delay").length<=0){

 

　　$(window).unbind("scroll");

 

　　}

 

　　})





本文转载自中文网