jQuery图片延迟加载插件-CSDN博客

本文介绍了一款名为Lazy Load的jQuery插件，它能够帮助网页在用户滚动到图片所在位置时才加载图片，从而提高网页加载速度并节省服务器带宽。通过在HTML中添加特定的img标签和使用JavaScript初始化插件，可以轻松实现图片懒加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候网页比较大且图片有比较多，会导致页面打开的速度很慢，而且还浪费了空间不少的流量（至少我是心疼的）。

Lazy load 是一款延迟加载图片的 jQuery 插件，在一些图片非常多的网站中非常有用，在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置才加载，这样对于含有很多图片的比较长的网页来说，可以加载的更快，并且还能节省服务器带宽。

使用方法：

1、首先在页面的head里面加入以下代码：

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.lazyload.js" type="text/javascript"></script>

2、HTML代码如下：

<img class="lazy" src="img/grey.gif" data-original="img/example1.jpg"  width="600" heigh="450">

<img class="lazy" src="img/grey.gif" data-original="img/example2.jpg"  width="600" heigh="450">

其中，src为占位符图片，data-original为图片的真实路径。可以为所有需要延迟加载的img添加一个class，做统一标识。

3、Javascript代码（所有class为lazy的img标签）：

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

Lazy load有如下属性：

threshold：值为number，图片离屏幕多少像素时开始提前加载；

event：值为String，使图片显示的事件，支持jQuery的所有事件，也可以是自定义事件。如：设置event为click，则需要点击占位符图片才能让图片显示；

effect：值为String，图片显示的效果，默认值为show。支持jQuery的fadeIn, slideDown；

container：值为String，使某容器内的使用延迟加载，容器内需要有滚动条；

属性的使用方法：

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

    threshhold:100,

    effect:"fadeIn"
});