jquery.lazyload实现图片延迟加载

Lazy Load 是一个用 JavaScript 编写的 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标签

修改 HTML 代码中需要延迟加载的 IMG 标签

<!--
将真实图片地址写在 data-original 属性中，而 src 属性中的图片换成占位符的图片（例如 1x1 像素的灰色图片或者 loading 的 gif 图片）
添加 class="lazy" 用于区别哪些图片需要延时加载，当然你也可以换成别的关键词，修改的同时记得修改调用时的 jQuery 选择器
添加 width 和 height 属性有助于在图片未加载时占满所需要的空间
-->
<img class="lazy" src="grey.gif" data-original="example.jpg" width="640" heigh="480">

img标签的src指向一个图片占位符，真实图片路径必须放在data-original属性上。给懒加载图像一个特定的class（例如:lazy）。这样你可以很容易地进行图像插件捆绑。

TIPS:这里必须设置图片的width和height,否则插件可能无法正常工作。

3.调用lazyload

$(function(){

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

})

这将使所有 class 为 lazy 的图片将被延迟加载.

图片的占位符除了可以通过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参数：

默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置threshold 选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.

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

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

6.设置查找图片张数

当图像不连续时

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

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

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

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

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

针对不启用JavaScript的情况

几乎所有浏览器的 JavaScript 都是激活的. 然而可能你仍希望能在不支持 JavaScript 的客户端展示真实图片. 当浏览器不支持 JavaScript 时优雅降级, 你可以将真实的图片片段在写 <noscript> 标签内.

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

可以通过 CSS 隐藏占位符.

1 2 3

.lazy {      display : none ; }

在支持 JavaScript 的浏览器中, 你必须在 DOM ready 时将占位符显示出来, 这可以在插件初始化的同时完成.

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

图片在容器里面

你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.

加载隐藏的图片

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

1 2 3

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

下载插件

最新版本 源代码和压缩代码. 插件已经在 OSX 的 Safari 5.1, Safari 6, Chrome 20, Firefox 12 浏览器上, Windows 的 Chrome 20, IE 8 and IE 9 浏览器上, 以及 iOS5 (iPhone 和 iPad) 的 Safari 5.1 浏览器上测试过.

releaselibID

参数说明

名称	默认值	说明
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 的源代码）