jquery.lazyload插件实现图片延迟加载

最新推荐文章于 2025-09-10 16:16:57 发布

转载最新推荐文章于 2025-09-10 16:16:57 发布 · 57 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/carriezhao/p/7094011.html

文章标签：

#javascript #ViewUI

本文介绍了一个实用的jQuery插件——LazyLoad，该插件能够实现图片的延迟加载，提高网页加载速度。文章详细解释了如何引入插件、设置图片标签、调用插件方法等步骤，并提供了高级配置选项。

jquery.lazyload是一个实现图片延迟加载的jQuery 插件，它可以延迟加载长页面中的图片。在浏览器可视区域外的图片在初始状态下不会被载入，直到用户将页面滚动到它们所在的位置。

1.引入js文件

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>

2.img标签

<img >"lazy" src="images/placeholder.gif" data-original="images/example.png"  width="600"/">

img标签的src指向一个图片占位符，这里推荐一个在线获取图片占位符的站点 > http://placehold.it/，真实图片路径在data-original中。

3.调用lazyload

$("img.lazy").lazyload();

图片的占位符除了可以通过src属性来指定，也可以通过lazyload函数的参数来指定：

$("img.lazy").lazyload({
    placeholder: "images/placeholder.gif"
});

4.占位图片事件触发加载

如果我们希望滚到到图片的位置后，还要通过click或hover事件来唤醒图片的加载，我们可以指定lazyload函数的event属性：

$("img.lazy").lazyload({
    placeholder: "images/placeholder.gif",
    event: "click"
});

当图片完全加载的时候，插件默认地使用show()方法来将图显示出来。你也可以使用其他的效果，如fadeIn：

$("img.lazy").lazyload({
    effect: "fadeIn"
})

5.提前加载图片

lazyload插件默认用户滚动到图片位置时才触发加载图片，如果我们希望滚动到距离图片一定位置就触发加载，可以指定lazyload函数的threshold参数：

$(“img.lazy”).lazyload({
threshold: 200
});

这样，当用户滚动到距离图片200像素时图片就开始加载了。

6.设置查找图片张数

lazyload的实现原理是，在页面滚动时，会搜索未加载的图片，如果图片在可视范围内就加载，默认情况下当找到第一张不在可见区域的图片时就会停止搜索。而搜索的顺序就是HTML文档中dom节点的定义顺序，所以如果有些图片定义在前面，但由于页面不好的布局图片将会呈现在后面，那么就会导致图片没办法正常显示。

此时我们可以通过lazyload函数的failure_limit参数：

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

这样一来，插件会搜索至少10个未加载的图片才停止搜索，如果你的图片布局比较不规则，可以尝试将这个参数调大。

转载于:https://www.cnblogs.com/carriezhao/p/7094011.html