我爱编程

图片延时加载插件jquery.lazyload.js使用方法

2018-04-12  本文已影响0人  紫瑟枫

最近在写项目的时候,列表页需要加载很多图片,下载图片花费很多时间,那么就会影响这个网页的加载速度,用户体验差,很可能出现卡顿现象。因此,有选择性的请求图片,能够明显的减少服务器压力和流量,也能够减少游览器的负担。

将页面上img的src属性设置为默认图片,而图片真实路径设置在data-original中。当滚动页面的时候lazyload.js计算图片位置和滚动的位置,先加载默认图片,后加载真实图片。

注意先写jquery插件 img写法

$('.info_img').lazylod();

threshold : 200 //设置灵敏度,表示进入显示区域还有200像素就开始加载

effect : "fadeIn" //使用淡入特效

failure_limit : 10 //容差范围,一定要设置此值,原因说明请参考原文档

container: $("#container") //使用父容器,父容器的CSS样式至少应包含"height: 600px;overflow: scroll;"两个属性

event : "click" //修改触发事件为单击

上一篇下一篇

猜你喜欢

热点阅读