深入研究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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jQuery实现手风琴特效
Jan 11 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
实例讲解PHP表单
2020/06/10 PHP
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
python奇偶行分开存储实现代码
2018/03/19 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
十一个高级MySql面试题
2014/10/06 面试题
计算机专业职业规划
2014/02/28 职场文书
商务英语专业求职信
2014/06/26 职场文书
预备党员转正意见
2015/06/01 职场文书
结婚司仪主持词
2015/06/29 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js
工厂无线对讲系统解决方案
2022/02/18 无线电