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

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

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

rush:js;">

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

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

rush:js;">

设置临界点

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

rush:js;"> $('img.lazy').lazyload({ threshold:200,});

设置占位符

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

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

设置事件来触发加载

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

rush:js;"> $('img.lazy').lazyload({ event:'click' });

使用特效

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

rush:js;"> $('img.lazy').lazyload({ effect:'fadeIn' });

图片在容器里面

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

rush:css;"> #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 选项来控制加载行为.

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

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

加载隐藏图片

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

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

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。