jQuery插件jquery.lazyload.js实现图片懒加载

 
更多

逻辑:引入jquery.js库和jquery.lazyload.min.js插件,在当前页需要懒加载的图片标签里面添加lazy类和data-original属性,在页尾script地方调用$(“img.lazy”).lazyload();即可。

STEP1:引入资源

<!--页尾引入js文件-->
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.lazyload.min.js"></script>

STEP2:HTML代码格式

<!--必须含有clsss=lazy和data-original=-->
<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />

STEP3:页面中加载

$(function() {
    $("img.lazy").lazyload();
});

以上便是jQuery插件jquery.lazyload.js实现图片懒加载的方法,请大家参考。

打赏

本文固定链接: https://www.cxy163.net/archives/2653 | 绝缘体

该日志由 绝缘体.. 于 2022年08月13日 发表在 未分类 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: jQuery插件jquery.lazyload.js实现图片懒加载 | 绝缘体

jQuery插件jquery.lazyload.js实现图片懒加载:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter