深入研究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实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 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常用函数小技巧
2008/09/11 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
python创建n行m列数组示例
2019/12/02 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
英语自我评价范文
2014/01/24 职场文书
农贸市场管理制度
2014/01/31 职场文书
供电工程专业求职信
2014/08/09 职场文书
2014年保育员工作总结
2014/12/02 职场文书
亲属关系公证书样本
2015/01/23 职场文书
七一建党节慰问信
2015/02/14 职场文书
民事诉讼代理词
2015/05/25 职场文书
初中生活随笔
2015/08/15 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
基于Python实现将列表数据生成折线图
2022/03/23 Python