$("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
});
您可能感兴趣的文章: