jQuery.lazyload

Posted 2020-07-18 盛开的雨季

Lazy Load延迟加载也有的称为惰性加载，是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.

延迟加载是程序人性化的一种体现，提高用户体验，防止一次性加载大量数据，而是根据用户需要进行数据查询操作。

一、怎么使用?

1.  Lazy Load 依赖于 jQuery,将下列代码加入页面 head 区域,当然也可以将这些代码放在</body>之前

<script src=”jquery-1.7.1.min.js” type=”text/javascript”></script>
<script src=”jquery.lazyload.mini.js” type=”text/javascript”></script>

2. html代码中src属性可以是1×1像素灰色gif,也可以是我们常用的一些等待加载图标.data-original属性才是我们需要加的图片

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

3.然后在执行代码中加入

$(“img.lazy”).lazyload();

这样样式为lazy的图片都将进行延迟加载.

二、禁用JavaScript浏览器的退路
几乎所有人的浏览器都启用JavaScript。当然也有某些情况下也有或禁用JavaScript的用户存在，当然这不是致命的，我们可以使用“noscript”

<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>

防止两个的图像同时显示用CSS隐藏一个。

.lazy { display: none; }

对于启用JavaScript的浏览器,当初始化插件。

$(“img.lazy”).show().lazyload();

这样当我们的浏览器都禁用JavaScript的时候也可以显示我们需要的图片。

三、设置灵敏度

默认情况下图片出现在浏览器可视区域就加载，浏览器可视区域外不加载。如果想要浏览器可视区域外的图片来加载可以设置阈值参数。threshold 选项默认值为 0（浏览器可视区域到图片的距离）。

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

这样，当浏览器可视区与图片的距离太到200像素时图片就进行加载。

四、事件来触发加载

事件可以是任何jQuery或mouseover事件,比如点击。您也可以使用自己的自定义事件,如运动或foobar。默认是当到用户滚动浏览器使图片出现在可视区域加载。

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

五、使用特效

默认情况下插件等待图像完全加载用show()来显示它。我们可以使用任何你想要的效果。下面的代码使用fadeIn效果。

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

六、容器内图像加载

可以使用插件在滚动图像容器加载,比如div和滚动条。只需通过这个容器作为jQuery对象。

CSS部份

#Container { height: 600px; overflow: scroll; }

js部份

$(“img.lazy”).lazyload({ container: $(“#container”) });

七、当图片不顺序排列

滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过我们可以通过 failurelimit 选项来控制加载行为.

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

将 failurelimit 设为 10， 当插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点.
八、延迟加载图片 
Lazy Load 插件的一个不完整的功能, 但是也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.

$(function() {

$(“img:below-the-fold”).lazyload({ event : “sporty” });

});

$(window).bind(“load”, function() {

var timeout = setTimeout(function() {$(“img.lazy”).trigger(“sporty”)}, 5000);

});

参数说明

名称	默认值	说明
container	window	父容器。延迟加载父容器中的图片。 [Demo1] [Demo2]
event	‘scroll‘	触发加载的事件 [Demo]
effect	‘show‘	加载使用的动画效果，如 show, fadeIn, slideDown 等 jQuery 自带的效果，或者自定义动画。 [Demo]
effectspeed	undefined	动画时间。作为 effect 的参数使用：effect(effectspeed)
data_attribute	‘original‘	真实图片地址的 data 属性后缀
threshold	0	灵敏度。默认为 0 表示当图片出现在显示区域中的立即加载显示；设为整数表示图片距离 x 像素进入显示区域时进行加载；设为负数表示图片进入显示区域 x 像素时进行加载。
failure_limit	0	容差范围。页面滚动时，Lazy Load 会遍历延迟加载的图片，检查是否在显示区域内，默认找到第 1 张不可见的图片时，就终止遍历。因为 Lazy Load 认为图片的排序是与 HTML 中的代码中的排序相同，但是也可能会出现例外，通过该值来扩大容差范围。
skip_invisible	true	跳过隐藏的图片。图片不可见时（如 display:none），不强制加载。
appear	null	图片加载时的事件 (Function)，有 2 个参数：elements_left（未加载的图片数量）、settings（lazyload 的参数）。[Demo]（参考 DEMO 的源代码）
load	null	图片加载后的事件 (Function)，有 2 个参数，同 appear 。[Demo]（参考 DEMO 的源代码）