lazyload.js延迟加载

图片延迟加载

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

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

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

<img class="lazy" src="${path}/img/loading.gif" data-original="${e.picture}" width="240" height="180" />

参数

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

在js中添加

扫描二维码关注公众号，回复： 10292510 查看本文章

<script type="text/javascript">
	$(document).ready(function() {
        $("img").lazyload({ 
        	//placeholder : "${_staticRes}/img/loading_240_180.gif",
        	effect: "fadeIn"
   		});
    });
	</script>

如果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"
   		});
    });

作者：恨_别离 本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利，尊重原创，人人有责。