Lazy Load(1.7.0)中文文档 -- 延迟加载图片的jQuery插件

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

现在Lazy Load的版本已经是1.7.0

下载地址:

完整版https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js  , 

压缩版https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js

下面进入正题.

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

建议:src中的等待图片,最好使用1像素的单色图片.

JS代码如下:

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

$("img.lazy").lazyload();这样就能实现Lazy Load的效果了.

看完Demo后,是不是觉得没什么效果出现?

这个问题会在后面提到.

其实,并非一定要使用它规定的 data-original 属性来存放图片URL.

你也可以自己定制别的属性名,如下:

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

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

只需设置 data_attribute 属性为对应的名称即可.     

注意:html代码大小写不敏感!所以 "data-" 后面只能跟小写字母或数字.

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

可以使用<noscript>标签,是用来定义在脚本未被执行时的替代内容/文本.

而且这样做还有一个好处,因为搜索引擎的爬虫是不处理JavaScript脚本的,所以能直接抓到<noscript>标签中的内容.

<style>
.lazy {  display: none; } 
.lazy { display: none; }
</style>

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

$("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 属性指向摆放 img 的容器的对象.

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

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

 废话不多说,直接看Demo ,不单竖着的可以, 横着也行Demo .

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 也是调用这个事件)

加载不可见的图片

Lazy Load 插件默认对隐藏的图片不加载(例如 display:none ). 这样做有助于性能的优化.

如果希望连隐藏的图片一起加载,则可以把 skip_invisible 设为 false .

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

 其实1.7.0版还有一些新的特性.有空再补上.

 摘自 简生的代码备忘录