编程技巧：用JQuery的lazyload.js实现图片异步载入

用JQuery的lazyload.js实现图片异步载入
转自：http://www.jo2.org/106.html

所谓图片异步加载，意思是不用一次把图片全部加载完，你可以叫它延迟加载，缓冲加载都行。

看看你有没有这种需求：某篇文章图片很多，如果在载入文章时就载入所有图片，无疑会延缓载入速度，让用户等更久，所以，我想找这样一种插件，让网页只加载浏览器视野范围内的图片，没出现在范围内的图片就暂不加载，等用户滑动滚动条时再逐步加载。lazyload就是用来实现这种效果。

lazyload.js其实是jQuery的一个插件，全称是jquery.lazyload.js，看它的名字就知道它的作用了——就是偷懒载入的意思。由于它是javascript写的，所以适用于所有网页，包括Wordpress。

使用方法我在Timmy的文章中找到的，非常简单。介绍以WordPress为例。

想要使用lazyload，得先载入jQuery，它是依靠jQuery来实现效果的。至于jQuery，大家不用去下载了，可以直接连接存放在Google服务器上的jQuery文件，永远不用担心丢失（当然，如果有天朝完全屏蔽Google的那一天的话……）

lazyload打包下载：http://pic.imtimmy.com/wp-content/js/lazyload/lazyload.zip

压缩包中除了lazyload.js外，还有一个grey.gif图片文件。这个图片的作用是，当页面上图片未载入时，就显示这张图片。将JS文件与图片传到你的空间，然后在你主题的header.php文件中加入代码：

//先载入jquery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
//再载入lazyload
<script type="text/javascript" src="http://www.jo2.org/js/jquery.lazyload.js"></script>
<script type="text/javascript">
jQuery(document).ready(
 function($){
  $("img").lazyload({
       placeholder : "http://www.jo2.org/js/grey.gif", //加载图片前的占位图片
       effect      : "fadeIn" //加载图片使用的效果(淡入)
  });
 }
);
</script>保存上传后，你会发现当你将滚动条慢慢下拉时，图片会一张一张加载出来，并带渐显效果，对用户体验非常友好。

lazyload.js参数说明
-----------------------------------------
lazyload.js是jQuery的一个插件,可以用来实现图片异步加载.

lazyload插件如何添加参数：
$("img").lazyload({
//参数添加到此位置，建议一行一个,用英文,作间隔
});
基本用法可见上个链接，下面对lazyload.js的一些参数进行说明，供使用者做出更贴切的效果。

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张可见区域外的图片,以避免出现这个问题.

————————————————————————

经测试,lazyload插件在IE7,firefox,chrome中均有效,未出现网上所说只对firefox有效的情况.只是在IE中不易看到fadeIn等特效,大概是IE的Javascript执行效率太低所致.