如何使用图片延迟加载插件lazyload.js【原创】

2018-02-09 12:41:45来源:http://blog.it985.com/23413.html作者:IT985博客人点击

分享

网页页面图片和内容比较多的时候,会导致网站加载速度很慢,如果图片比较多,网站加载很久才能显示图片,用户体验性不是很好,使用图片延迟加载插件lazyload.js可以让图片延迟加载,以下是关于插件使用的介绍:


lazyload.js调用方法


(1)为图片加入样式lazy 图片路径引用方法用data-original,


<img class=”lazy” data-original=”imges/img1.jpg”>


(2)<script src=”jquery.lazyload.js”></script>


<script type=”text/javascript”>


$(function() {


$(“.lazy”).lazyload({


effect : “fadeIn”,


threshold : 30


});


});


</script>


注:(1)fadeIn是载入图片的方式,可以换成其他的效果。


(2)threshold:30是指距离屏幕30px提前载入图片,也可以为负值,负值是延迟载入。


(3)lazyload.js其他参数,可根据项目需要自行添加。


$(“.lazy”).lazyload({


placeholder : “img/grey.gif”, //用图片提前占位


// placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏


effect: “fadeIn”, // 载入使用何种效果


// effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn


threshold: 200, // 提前开始加载


// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉


event: ‘click’, // 事件触发时才加载


// event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…


container: $(“#container”), // 对某容器中的图片实现效果


// container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片


failurelimit : 10 // 图片排序混乱时


// failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.


});


(4)lazyload.js针对使用的是设置宽高的img标签,不适用于background背景图。


转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/23413.html



微信打赏


支付宝打赏


感谢您对作者Cindy的打赏,我们会更加努力!如果您想成为作者,请点我


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台