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

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

将页面上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" //修改触发事件为单击

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,868评论 1 92
  • 如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会...
    yyshang阅读 436评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,286评论 19 139
  • 在生活中,经常性的会听到这样的话,你看看你,不好好学习,今天就这样子了! 其实对于在学校时,也努力学习的人,也考上...
    大麦茶的故事阅读 152评论 0 0
  • 握一纸淡淡素笺,分分撒撒飘落一地粉色花瓣,浓墨侵染了年华,寄不出的信谁落款…… 三月的雨去了下个季节,没有烟雨蒙蒙...
    清秋素心阅读 243评论 0 2