深入研究jQuery图片懒加载 lazyload.js使用方法


Posted in jQuery onAugust 16, 2017

lazyload是一个用Javascript编写的jQuery插件,它可以延迟加载长页面中的图片,在浏览器可视区域外的图片将不会被载入,直到用户将它们滚动到它们所在的位置。

跟bootstrap一样,lazyload.js也是依赖于jQuery

<script src="resources/js/jquery-1.8.3.min.js"></script>
<script src="resources/js/jquery.lazyload.min.js"></script>

与之前的图片引入路径不同,真实的图片路径不再是用src属性,而是data-original。src属性用于引入占位符图片(当然,个人更推荐占位符不写在img标签里)。同时,必须设置img的宽度和高度,给每一个懒加载的图片加一个class比如.lazy
四大属性必须同时具备:class   data-original   width  height

<img class="lazy" width="640" height="480" data-original="resources/images/2.jpg">

要想让所有class为lazy的图片懒加载,只需要简单的一行代码就可以

<script src="resources/js/jquery-1.8.3.min.js"></script>
<script src="resources/js/jquery.lazyload.min.js"></script>
<script>
 $('img.lazy').lazyload( );
</script>
</body>
</html>

设置临界点

默认情况下,图片会出现在显示区域时才加载,如果想提前加载图片,可以设置 threshold 选项,比如设置thredshold为200,令图片在距离显示区域200px时提前加载

$('img.lazy').lazyload({
 threshold:200,
});

设置占位符

前面提到过,可以用img标签的src属性引入一个图片,比如loading.gif,替代未进去显示区域的待加载图片,我们同样可以添加 placeholder 选项来实现

$('img.lazy').lazyload({
 placeholder:'resources/images/loading.gif'
});

设置事件来触发加载

可以用jQuery事件如click,mouseover,也可以用自定义事件,默认情况下,是要等到用户向下滚动并且图像出现在显示区域时才触发。比如:只有当用户点击的时候才加载图片

$('img.lazy').lazyload({
 event:'click'
});
深入研究jQuery图片懒加载 lazyload.js使用方法

使用特效

默认情况下,插件等待图像完全加载后调用show()方法来显示图片,我们也可以用一些特效比如:fadeIn

$('img.lazy').lazyload({
 effect:'fadeIn'
});

图片在容器里面

可用在容器可滚动的图片上,例如带滚动条的DIV元素,需要将容器定义为jQuery对象,并作为参数传到初始化方法里面,比如:垂直滚动

#container {
 height: 600px;
 overflow: scroll;
}

<img class="lazy" data-original="img/example.jpg" width="765" height="574">

$("img.lazy").lazyload({  
 effect : "fadeIn",
 container: $("#container")
});

当图片不顺序排列

滚动页面的时候, Lazy Load 会循环的加载图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.

$("img.lazy").lazyload({ 
 failure_limit : 10
});

将 failurelimit 设为 10 令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点.

加载隐藏图片

可能在你的页面上埋藏可很多隐藏的图片. 比如插件用在对列表的筛选, 你可以不断地修改列表中各条目的显示状态. 为了提升性能, Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将 skip_invisible 设为 false

$("img.lazy").lazyload({ 
 skip_invisible : false
});

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持!

jQuery 相关文章推荐
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 #jQuery
基于JQuery的Ajax方法使用详解
Aug 16 #jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 #jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 #jQuery
jQuery DOM节点的遍历方法小结
Aug 15 #jQuery
jQuery实现菜单栏导航效果
Aug 15 #jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 #jQuery
You might like
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
python共享引用(多个变量引用)示例代码
2013/12/04 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
opencv python图像梯度实例详解
2020/02/04 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
数据库面试要点基本概念
2013/10/31 面试题
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
学雷锋标语
2014/06/25 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
停电通知范文
2015/04/16 职场文书
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python