图片延迟加载(jQuery Lazy Load)中文手册 | 诸葛小觉的博客

明天网吧 2015-07-26

展开全文

最近几天小觉在关于学习方面的任务上又多加了一个条例，就是将当天学习任务中学习到的内容整理好发布到博客中，很不幸的是今天当选的是图片延迟加载，也就是JQuery Lazy Load。那么下面小觉开始进行它的说明：

它是一个基于jQuery的图片延迟加载插件，在用户滚动页面到图片之后才进行加载，其对于有较多图片的页面当中，使用图片延迟加载，能够有效的提高页面的加载速度。

这里给出Lazyload相关的demo页面（插件作者制作）：

基本功能、渐变元素、没有script的返回、水平滚动的页面、容器内的水平滚动
 容器内的纵向滚动、定义延迟时间过后再加载、通过AJAX加载

注意：在切换每个demo页面的时候请记得清除浏览器缓存。

接下来我们说下使用jQuery Lazy Load的三要素：

1、因为该插件建立在jQuery的存在上，所以请在</body>前加入jQuery和该插件的调用，示例代码如下：

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

2、必须在image上添加data-original属性并放入原图片链接，并且在src中放入执行Lazyload未执行前所显示的图片链接，示例代码如下：

<img data-original="images/cover.jpg" width="640" height="480">

注意，如果你想更精确的对指定执行Lazyload的图片进行定位的话，还可以在image中添加Id或者class，示例代码如下：

<img class="top" data-original="images/cover.jpg" width="640" height="480">

3、jQuery Lazy Load的配置函数：

$(function() {
$("img").lazyload();//对所有带有data-original的图片进行加载
$("img.top").lazyload();//对所有带有data-original且属于top类的图片进行加载
});

再下面，小觉谈下配置jQuery Lazy Load的一些值：

阈值：百度上的解释是促发某种行为或者反应产生所需要的最低值，这里是设置当前显示部分底部或者最右边距离图片一段距离的时候开始加载开始出现的图片，这一段距离就是该值所设立的。示例代码如下：

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

注意，默认值是当图片开始出现在当前显示部分的时候才开始加载。

触发方式：比如通过点击或者鼠标移动到图片上才触发Lazyload，默认是通过鼠标滚动页面到图片出现就开始加载。示例代码如下：

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

下面说下本文一开始给出的demo一一做个介绍：

实现定义延迟时间过后再加载的demo，示例代码如下：

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

由于Lazyload默认是在一张图片完全加载了之后才显现，那么现在给它加一个渐变的特效，示例代码如下：

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

没有script的返回demo，示例代码如下：

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="765" height="574">
<noscript><img src="img/example.jpg" width="765" height="574"></noscript>
//通过noscript标签让不支持JavaScript的浏览器直接显示图片
<style>.lazy {display: none;}</style>
//通过样式隐藏lazy类的图片
<script>$("img.lazy").show().lazyload();</script>
//通过JavaScript显示lazy类图片，同样放置在该插件代码下即可，同样支持添加特效等参数

在容器内使用Lazyload：

#container {
height: 600px;
overflow: scroll;
}
$("img.lazy").lazyload({
container: $("#container")//仅需要定义一个容器属性即可
});

说到这里，切入一个话题——当图片并非有序呈现在浏览器窗口的时候应该怎么办呢？

Lazyload有一个循环查找img的机制，根据html文档的布局从上往下查找，当第一个被找到的img没有显示或者加载的时候，它就会停止往下查找，相对来说是对$("img.lazy")这个对象(组)进行顺序查找。

但是假如在页面上有用到float和position等样式来定位图片的时候，浏览器所呈现的布局跟html中的DOM(图片)顺序就相驳了，从而导致某种情况下img出现在当前可显示页面上却无法显示或者加载的问题。还有就是因为其循环查找img的机制，在Lazyload找到第一个未显示的img时，其查找就被中止，从而无法往下遍历。

接着这儿给出的方案就是failure_limit属性，请看以下示例代码：

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

其中它的作用是让Lazyload查找到第10个未显示的img处，这家伙主要是用在图片多且布局复杂的页面，如果你的页面真的太过于“变态”的话请努力上调该值。

说到这里（真的词穷了），我们再说说一个问题——如果遇到不可见的图片的时候应该怎么办？

小觉这儿所说的不可见的图片所代表的是那些出现在当前显示屏幕却没有 :visible 属性的图片，对此Lazyload的默认做法是忽视掉这些没有 :visible 属性的图片。所以对此可以对函数配置skip_invisible为false来重新让Lazyload遍历到这些不可见的图片，可参考以下示例代码：

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

注意：Webkit内核浏览器在img上没有定义图片宽和高的情况下会报告这类不可见图片，这将导致只有在你滚动鼠标的一会才能够显示图片，当然这也得基于你已经对其将skip_invisible设置为false。

说到这里（实在是不知道怎么衔接了），我们再说说又一个问题，Lazyload可否应用到背景图片中呢？

答案是可以的，默认待其因页面滚动而显现的时候就会加载，这和Lazyload基本特性相同，而且这里有两种方法使用：

其一是用在没有图片的元素上，且其会自动改变background-image样式为data-original上的链接，实例代码如下：

<div class="lazy" data-original="img/bmw_m1_hood.jpg" style="background-image: url('img/grey.gif'); width: 765px; height: 574px;"></div>
$("div.lazy").lazyload({});

其二是用在img占位符上，且在该占位符上将失去一个http请求，示例代码如下：

<img class="lazy" data-original="img/example.jpg" width="765" height="574">
$("img.lazy").lazyload();

注意：现在只有Lazyload 1.9.0及其以上版本支持在背景图片上使用延迟加载。

说到这里（……），再说下Lazyload的两个事件，即appear和load，同时这两个时间又含有两个参数，即elements_left和settings，下面一一说明一下：

appear：当图片出现在当前视区，但还没有进行加载之前会被执行。

load：当图片已经被加载时。

elements_left：指的是图片由左边开始进行加载。

settings：将所设置的内容传向Lazyload。

可能上述文字有点难以明白，以下为一示例代码：

$("img.lazy").lazyload({
   appear : function(elements_left, settings) {
       console.log(this, elements_left, settings);
   },
   load : function(elements_left, settings) {
       console.log(this, elements_left, settings);
   }
});

上述代码所执行的是让lazy类的图片在出现的时候由左向右加载，然后在加载所有图片时也是由左向右加载，啊！！我也不懂，希望懂的朋友能够纠正下，度娘和谷歌都无法给出准确的回应。

说到这里（= =），让我们再说说一个参数atta_attribute，它的作用是可以自定义original 图片属性，下面给出示例代码的话大家应该懂了：

<script>
$("img.lazy").lazyload({
data_attribute : "kitten"
});
</script>
<img src="/img/placeholder.gif" data-kitten="/img/real-image.png" />

最后小觉也自己写了一串代码来加强Lazyload，当然小觉的水平不可能让其支持其所有功能，这里小觉所要达到的目的是自动将原img中的src真实地址放置于data-original中，然后src中定义未加载真实图片前的图片地址。示例代码如下：

$("img").each(function () {
   var that = $(this);
   var re=/(.+?.(jpg|bmp|png|jepg|gif))/i;
   href = that.attr("src");
   if (re.test(href)) {
       that.attr("data-original",href);//转移原图片中的真链接到data-original
       href =href.replace(re, "123.jpg");//定义未加载前的图片
       that.attr("src",href);
   }
});//配合jQuery Lazy Load修改指定图片链接函数，放置于Lazyload配置函数之前
$(function() {
   $("img").lazyload();
});//jQuery Lazy Load配置函数

同时这儿给出示例文件以参考：http:///S1jsnK （密码：tusZ）

关于Lazyload的下载（可直接调用链接，最新版本都出现在该链接）：

最新的Lazyload原始版本：https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

最新的Lazyload压缩版本：https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js

已经在Safari 5.1, Safari 6, Chrome 20, Firefox 12 on OSX and Chrome 20, IE 8 and IE 9 on Windows and Safari 5.1 on iOS 5 both iPhone and iPad等地进行测试完善。

明天在本文上还可能有小小更新，敬请期待，现在很晚了。

还没找到你想要的？