lazyload.js延迟加载

图片延迟加载

互联网加载图片很多，需要用户看到的先加载，所以使用延迟加载

首先引入juery和js：jquery.lazyload.js，

简单的方法是在img标签上添加data-original后面跟的是加载完成要显示的图片，而src上是图片没有加载成功的时候显示的图片

 

参数

 

 

placeholder : "img/grey.gif",     //用图片提前占位
effect : "fadeIn",    //载入使用何种效果,effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold : 200,    //提前开始加载
event : "click",      //事件触发时才加载,event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标划过或点击图片才开始加载,后两个值未测试…
failurelimit : 10,     //图片排序混乱时 ,
failurelimit,值为数字.

在js中添加

 

 

 

 

如果img是动态加载的则，可以

 

$(document).ready(function() {
		$(".shop_deimgbox img").each(function(){
			var src=$(this).attr("src");
			$(this).attr("data-original",src);
			$(this).attr("src","${_staticRes}/img/loading_658_200.gif");
		});
		
        $("img").lazyload({ 
        	placeholder : "${_staticRes}/img/loading792_400.gif",
        	effect: "fadeIn"
   		});
    });

谢谢支持，多少都行