jQuery插件lazyload.js延迟加载图片的使用方法

lazyload.js插件概述与原理

当网页包含大量图片且长度较长时，一次性下载所有图片会显著拖慢页面加载速度。使用延迟加载插件可以根据用户的滚动行为，仅在用户即将查看图片时才从服务器请求并显示图片。这种方式能有效降低服务器负载，并显著提升页面的整体加载速度。

Lazy Load 插件原理

该插件的核心机制是将目标 img 元素的 src 属性值暂存到 orginal 属性中，以此中断图片的初始加载过程。随后，插件会监听页面滚动事件，当检测到图片进入浏览器可视区域时，将 src 属性还原为原始地址，从而触发图片加载，实现缓冲加载的视觉效果。具体的代码引入方式如下：

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>
<script type="text/javascript">
$(document).ready(
function($){
$("img").lazyload({
placeholder : "images/grey.gif", //加载图片前的占位图片
effect : "fadeIn" //加载图片使用的效果(淡入)
    });
    });
</script>

然而，许多JavaScript专家分析指出，该插件实际上并未真正起到完全阻止图片预加载的作用。官方文档中也对此现象进行了说明，并提供了相应的解决方案。

问题的根源在于，即使在现代浏览器中删除了由JavaScript控制的src属性，浏览器仍会自动尝试加载该图像资源。

解决这一问题的方法相对简单，即直接修改HTML结构。在img标签中新增一个属性，将src属性的值指向占位图片，同时添加data-original属性，使其指向真实的图像地址。示例如下：

<img src="img/grey.gif" data-original="img/example.jpg" >

上述示例中，页面内所有图片均被设置为延迟加载。但在某些场景下，我们可能不希望部分图片进行延迟加载。此时，可以通过调整选择器来精确控制需要延迟加载的图片范围。

例如，仅对类名为main下的图像进行缓冲加载：

$(".main img").lazyload({
placeholder : "images/grey.gif",
effect : "fadeIn"
});

加载挂载有lazy类的图像：

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

其他情况可参照上述示例，通过调整选择器来实现不同的加载策略。

高级使用方法与配置

lazyload.js 高级使用方法：

以下部分源自官方文档的简要翻译，介绍更为周全的使用策略。

更周全的做法

我们需要考虑一种情况：如果网页中定义了上述结构，源图像将不会直接加载，只有当JavaScript执行后才会显示源图像。若用户浏览器不支持JavaScript或用户禁用了JavaScript选项，图像将无法显示。因此，缺乏JavaScript支持时，图像不可见。

为应对此问题，建议引入noscript标签。基本思路是使用noscript标签包裹真实图像地址，当浏览器不支持JavaScript时，直接显示该图像。

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

对于现有图像，可通过隐藏处理并使用show()方法触发显示。

.lazy {
display: none;
}

这样，若浏览器不支持JavaScript，自定义的img元素不会显示，而是展示noscript标签内的图像。具体实现代码如下：

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

提前加载

默认情况下，插件会在用户滚动到图片位置时开始加载。这可能导致用户先看到空白区域，随后图片缓慢出现。若希望在用户滚动到达前预先加载图像，可通过配置参数实现。

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

threshold参数用于控制提前加载的距离。上述语句表示，当图片距离可视区域边缘还有200像素时，即开始加载图片。

自定义触发事件

默认的触发事件为滚动。你可以使用event属性设置自定义的加载事件，并根据自定义条件触发该事件以加载图像。

$("img.lazy").lazyload({
event : "click"
});

自定义显示效果

默认的图片显示效果为无特效，即下载完成后直接显示，这可能导致用户体验不佳。你可以设置effect属性来控制图片的显示效果，例如：

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

fadeIn效果通过改变图片透明度，实现渐现的视觉效果。

把图像插入某个容器

在使用智能手机访问应用网站时，常看到横屏容器内展示手机截图。使用container属性可以轻松在指定容器中实现缓冲加载。首先需用CSS定义容器，然后调用插件进行加载。

#container { height: 600px; overflow: scroll; }
$("img.lazy").lazyload({
container: $("#container")
});

加载不可见图像

部分图像可能应用了display:none等属性而不可见。默认情况下，插件不会加载这些隐藏的不可见图像。若需加载此类图像，需将skip_invisible参数设置为false，代码如下：

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

以上即为lazyload.js插件的简要介绍。