图片延迟加载技术-jquery.lazyload.js插件

我们在浏览图片量非常大的页面时，像淘宝商城商品展示、必应图片搜索这类网站，图片的加载非常流畅，其中就应用了图片延迟加载技术。本文讲解Lazyload图片加载插件，当我们打开页面时，首先在屏幕可视区域加载完图片，随着向下滚动页面，图片会陆续加载，从而提升了页面打开速度。

Lazyload是一款基于jQuery的插件，在要显示大量图片的页面，图片是按需加载的，只在浏览器可视区内加载图片，当用户使用滚动条下拉时，后面的图片才会继续加载，从某种意义上讲，这种技术减少了服务器的负载。您可以到Lazyload官网下载最新的版本：http://www.appelsiini.net/projects/lazyload。

HTML

首先载入jquery库和lazyload插件：

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

在body中需要放置图片的区域放置多个要显示的图片。图片越多效果越明显。

<img src="images/blank.gif" data-original="images/01.jpg" width="205" height="188" alt="" /> 

注意，每张图片的src属性对应的是一张预定义的图片，就是再真正的图片还没加载的时候的替代图片，我们通常使用1x1的blank.gif图片。真正的图片是由属性data-original指定的，然后还需要设置图片的宽度和高度。

jQuery

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

 

和许多插件使用一样，只需要在元素上调用lazyload()即可，现在你就可以看到效果了。Lazyload同样提供了多个参数可设置不同的效果。

Jquery.LazyLoad.js插件参数详解：  

下面对LazyLoad插件的一些参数进行说明，供使用者做出更贴切的效果。 

1,用图片提前占位 
placeholder : "img/grey.gif", 
参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏 

2,载入使用何种效果 
effect : "fadeIn", 
参数：effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn 

3,提前开始加载 
threshold : 200, 
参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉. 

4,事件触发时才加载 
event : "click", 
参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试… 

5,对某容器中的图片实现效果 
container: $("#container"), 
参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片 

6,图片排序混乱时 
failurelimit : 10, 

参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见

区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.

 

文章来自：http://www.helloweba.com/view-blog-151.html