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

什么是LazyLoad技术？

在页面上图片比较多的时候，打开一张页面必然引发与服务器大数据量的交互。尤为是对于高清晰的图片，占了几百K的空间。Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它能够延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。
在包含不少大图片长页面中延迟加载图片能够加快页面加载速度. 浏览器将会在加载可见图片以后即进入就绪状态. 在某些状况下还能够帮助下降服务器负担，这样势必会引发速度上质的提高。
兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0其中safari和chrome部分功能不支持。

Lazy Load 灵感来自 Matt Mlinac 制做的 YUI ImageLoader 工具箱. 这是演示页面。

原文的连接在:http://www.appelsiini.net/projects/lazyload


如今Lazy Load的版本已是1.8.1

下载地址: http://www.jb51.net/jiaoben/63757.html

实例下载:

下载声明：
1. 注：此代码仅供学习交流，请勿用于商业用途。
2. 注：此代码仅供学习交流，请勿用于商业用途。
文件信息： 文件名： Lazy Load延迟加载图片实例
文件Hash：dd3e435124e377c2da33344d442f85d1
文件大小：1.1 MB
文件上传日期：2012 年 3 月 25 日
文件更新日期：2012 年 3 月 25 日
文件描述：在页面上图片比较多的时候，打开一张页面必然引发与服务器大数据量的交互。尤为是对于高清晰的图片，占了几百K的空间。Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它能够延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。

怎样使用? 下面进入正题.Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域:

复制代码代码以下:

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

Lazy Load的使用方法十分简单,但新版作了一些调整,必须修改<img>标签的属性。把<img>标签中的 src 属性改成等待图片的URL, data-original 属性填上真正的图片URL.
以下:

复制代码代码以下:

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

建议:src中的等待图片,最好使用1像素的单色图片。
JS代码以下:

复制代码代码以下:

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

这样就能实现Lazy Load的效果了. Demo

看完Demo后,是否是以为没什么效果出现?这个问题会在后面提到.

其实,并不是必定要使用它规定的 data-original 属性来存放图片URL.你也能够本身定制别的属性名,以下:
<img class="lazy" src="img/grey.gif" data-attr="img/example.jpg" width="640" heigh="480">
JS代码以下:

复制代码代码以下:

$("img.lazy").lazyload({ data_attribute : "attr" });

只需设置 data_attribute 属性为对应的名称便可. (注意:html代码大小写不敏感!因此 "data-" 后面只能跟小写字母或数字.)

对于不支持JavaScript的浏览器,应该有相应的降级处理.

可使用<noscript>标签,是用来定义在脚本未被执行时的替代内容/文本.并且这样作还有一个好处,由于搜索引擎的爬虫是不处理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;
}

JS代码:

复制代码代码以下:

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

设置图片加载的反应距离
Lazy Load插件默认的设置是:图片在浏览器窗口上出现,就会触发加载.但经过设置 threshold 属性的值,能够调整图片的预先加载位置/距离.

复制代码代码以下:

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

另外, threshold 能够为正数或者负数.正数是预先加载, 假设数值为200, 则图片距离出现到屏幕还有 200px 时,就开始加载.若是是负数,则相反.假设数值为-200时,则图片已经在窗口出现,而且距离浏览器视窗底部的距离为 200px 时,才开始加载.
PS:图片和屏幕的距离是根据图片的 top 位置计算.
注意:threshold的设置须要考虑网站的长度和图片的高度,若是数值过大则会致使没法加载的问题.建议数值设置不要超过相应图片高度的一半.

经过事件触发加载
能够经过jQuery定义的事件来触发加载,也可使用本身定义的事件.

复制代码代码以下:

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

实现动画效果
上面的Demo之因此会没有图片加载的效果,是由于Lazy Load默认的图片加载是经过 jQuery 的show()方法来显示,因此图片出现几乎是一瞬间.固然咱们还能够实现其余效果.

复制代码代码以下:

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

另外还可使用 slideDown() 方法,但效果不佳.

若是想要控制动画的速度,还能够修改 effectspeed 属性.

复制代码代码以下:

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

effectspeed 属性默认是空的,因此若是不设置它,动画的时间为400毫秒.
Container容器属性
当要延迟加载的图片全摆在一个容器中.只需把 container 属性指向摆放 img 的容器的对象.
css代码:

复制代码代码以下:

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

js代码:

复制代码代码以下:

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

废话很少说,直接看Demo ,不单竖着的能够, 横着也行Demo .

failure_limit的属性
Lazy Load 有一个循环查找 img 的机制.根据 HTML 文档的布局从上往下查找,当找到第一个并未显示/加载的 img 时,就会中止往下查找.(其实就是对 $("img.lazy") 这个对象(组)进行顺序查找)

那这个 failure_limit 的属性有什么用呢?

如今网站设计时,都会用到大量的定位样式,如: float 和 position , 这样在浏览器呈现的布局效果和 HTML 文档中的 DOM 顺序有很大差别.
这样就会存在一种状况,某 <img> 标签已出如今屏幕上,但它却没法显示!! 由于它在 HTML 文档中的实际位置排在了那些尚未显示的 <img> 标签后面, 这样会致使显示在屏幕上的这个 <img> 标签没法加载相应的图片.当Lazy Load 在找到第一个未显示的 <img> 标签时,查找已经被终止了, 并无继续往下遍历.

因此这个时候,就可使用failure_limit属性.

复制代码代码以下:

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

这样 Lazy Load 会查找到第10个未显示的<img>标签处.当在图片多且布局复杂的页面时, failure_limit 的做用就很大了.
原文还舒适提示:If you have a funky layout set this number to something high. 若是你的网站布局很"变态",建议把该值调得更高.

延迟下载图片
能够经过自定义事件,而后经过 setTimeout 来设置延迟触发该事件.

复制代码代码以下:

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

$(window).bind("load", function() {
var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")},5000);
});

主要原理是,当 event 被设置为 scroll 之外的事件时, 实际上都会绑定了一个内置的 "appear" 事件.顾名思义, 这个事件就是用来显示图片的. (其实 scroll 也是调用这个事件)

skip_invisible 加载不可见的图片
Lazy Load 插件默认对隐藏的图片不加载(例如 display:none ). 这样作有助于性能的优化.若是但愿连隐藏的图片一块儿加载,则能够把 skip_invisible 设为 false .

复制代码代码以下:

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