注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

谈笑涧

已开通独立前端博客,请访问 http://www.candoudou.com

 
 
 

日志

 
 

jQuery延迟加载插件(Lazy Load)详解  

2012-04-20 10:13:26|  分类: Jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

最新版本的Lazy Load并不能替代你的网页。即便你使用JavaScript移除了图片的src属性,有些现代的浏览器仍然会加载图片。现在你必须修改你的html代码,使用占位图片作为img标签的src属性。真实的图片地址应该存储在data-original属性中。

<img data-original="img/example.jpg" src="img/grey.gif"> 

好处是现在你可以把你所有的JavaScript脚本放在页面的底部。如果你想支持没有启用JavaScript的浏览器,你必须在<noscript>标签内包含原始图像。阅读下面的文档获取更多信息。

Lazy Load 是用JavaScript编写的jQuery插件。它会延迟长页面中的图片加载。可视区域外的图片在用户滚动到他们之前不会加载。这与图片预加载(image preloading)是截然相反的情况。

在包含很多大体积图片的长页面中使用Lazy Load,会使加快页面的载入速度。当可视区域的图片加载完成后,浏览器将会处于准备状态。在一些情况下,这也会帮助服务器降低负载。

Lazy Load 灵感来自 Matt Mlinac 开发的 YUI ImageLoader工具箱。

这里有一些演示页面:basic options,with fadein effect,noscript fallbackhorizontal scrolling,horizontal scrolling inside containervertical scrolling inside containerpage with gazillion images 和load images using timeout.

当检查每个请求之间的演示清除浏览器缓存。你可以检查实际上的加载情况:开发者控制台(Chrome、Safari),FireBug(Firefox),HTTPHeaders(IE)

怎样使用?

Lazy Load依赖jQuery。在你的HTML代码的底部包含它们:

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

你必须修改你的HTML代码。使用占位图片作为img的src属性的值,演示页面使用1x1像素的灰色gif作为占位图片,然后设置data-original属性的值为图片实际的URL地址,给需要延迟加载图片的指定特定类。通过这种方式,你可以轻松地控制延迟图片的绑定。

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

JS代码看起来这样:

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

这是所有拥有lazy类可以延迟加载的原因。查看基本选项演示

为不支持JS的浏览器设置回退

事实上几乎所有的浏览器都启用JavaScript。但是在一些情况下,即使客户端的请求不支持JavaScript,你仍然想显示真实的图像。Google crawlers不会执行JS,但是仍然看起来像是忽略了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; } 

对启用JavaScript的浏览器,当文档载入的时候,你必须显示占位图。当插件初始化的同时,

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

当你想要该插件平稳退化,所有可选的都应该完成。

设置敏感度

当图片出现在可视区域内,默认才会加载。如果你想提前加载图片,可以设置threshold参数。设置threshold为200,图片离可视区域底部还有200像素的时候才会加载。

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

手动触发事件载入

事件可以是任何jQuery的事件,例如click或mouseover。你可以使用自定义的事件,例如sporty或foobar。默认会等待直到用户滚动到图片出现在窗口。为了阻止所有图片加载,直到占位图点击的时候才加载,你可以这样做:

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

使用效果

默认情况下,插件会等待图片完全载入,并用show()去显示它。但是你可以使用任意你想要的效果。下面的代码使用了fadeIn效果。你可以在效果展示页查看它如何工作。

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

图片在容器中

你也可以对滚动容器中的图片使用该插件,比如有滚动调的div。只需要传递把容器作为jQuery对象传递给插件。这儿有针对水平容器垂直容器的演示。

#container {     height: 600px;     overflow: scroll; } 
$("img.lazy").lazyload({               container: $("#container") }); 

当图片不连续时

After scrolling page Lazy Load loops though unloaded images.在循环中,如果图片变为可见。默认情况下,当第一张不可见的图片被发现,轮询就会停止。这是基于以下假设。图片在页面中的排列和图片在HTML代码中的排列必须一致。假设在一些错误布局的情况下,你可以使用failure_limit选项控制加载行为。

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

设置failure_limit为10会导致插件停止搜索图片去加载,在找到10张图片之后。如果你有一个时髦的布局,可以把该数字设置得更高一些。

延迟加载的图像

延迟加载的一个不完全的功能,它也可能延迟载入中的图片。下面的代码等待页面载入完成(HTML和可见图像全部加载)。页面加载完成后5秒,指定区域的图片会自动加载。延迟加载演示

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

加载不可见的图片

在有些情况下,图片是不可见的。例如,当使用插件,在一个大的可筛选项目里,它们的可见状态是会动态改变的。为了提高Lazy Load的性能,默认会忽略不可见的图片。如果你想载入不可见的图片,设置skip_invisible为false。

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

下载

最新版本的:源码文件,压缩文件。测试过该插件的浏览器:OSX平台的Safari 5.1, Firefox 3.6, Firefox 7.0, Firefox 8.0;Windows平台的Firefox 3.0, Chrome 14, IE 8;iOS版本的iPhone和iPad平台的Safari 5.1。

  评论这张
 
阅读(1260)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017