深入研究jQuery图片懒加载 lazyload.js使用方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了深入研究jQuery图片懒加载 lazyload.js使用方法,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2875字,纯文字阅读大概需要5分钟。
内容图文
![深入研究jQuery图片懒加载 lazyload.js使用方法](/upload/InfoBanner/zyjiaocheng/342/b33e9a6f57e64ef69ce91b8b968632a7.jpg)
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使用方法 - 文章图片](/upload/getfiles/0001/2021/4/23/20210423033625924.jpg)
使用特效
默认情况下,插件等待图像完全加载后调用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图片懒加载 lazyload.js使用方法全部内容,希望文章能够帮你解决深入研究jQuery图片懒加载 lazyload.js使用方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。