实现网页图片的异步加载

如题。

        最近在进行开发的项目中，有一个网页需要使用非常多的图片，那么必须对图片的加载做优化。使用流式加载图片的方法是绝对不行，对服务器的带宽将是非常大的考验，于是，我考虑使用图片的异步加载。

        在网上寻找插件，最终让我找到一个非常牛逼的js插件。名字叫做：lazy load.项目主页如下：http://www.appelsiini.net/projects/lazyload

        这个插件能够实现的效果，是在页面初次加载的时候，只加载可视窗口范围内的图片。其他区域的图片只有在当页面滑动到可视位置的时候才会加载。对于一个大页面，如果用户在该页面的停留时间不长，那么使用这种异步加载的方法会明显地降低服务器带宽的压力。

         使用的方法，引入了lazy load的js库之后，在页面的任意位置，可以通过img标签，定义一个位置。

HTML：类名是不可更改的，data-original跟的是img的链接地址。

<img class="lazy" data-original="../res/good-1-1.jpg">

JS：

<!--图片异步加载插件js-->
<script src="../res/jquery.lazyload.js" type="text/javascript"></script>
<script>
   <!--实现图片异步加载lazyload,effect是图片加载的效果，这里是缓缓浮现的效果-->
	$("img.lazy").lazyload({
	   effect : "fadeIn"
	});
</script>

当然，我们还可以设置当页面滑动至某位置，距离其滑动方向一定距离内的图片预先加载，防止页面加载的时候出现图片的位置出现了一张灰色的背景图，

在上面的js中的lazyload函数中体添加一个语句：

threshold : 200

后面的数值能够让用户自定义页面上的这段预先加载图片的距离。

当然，这个插件好像还是有一些问题，例如网上有网友提出，这个插件不仅不能减少服务器的压力，反而会增加服务器的压力。

最后附上一个大神写的图片异步加载的插件，虽然不太完美，但是对于帮助我们理解lazy load的工作原理还是有一定的帮助的。

http://www.zhangxinxu.com/wordpress/2010/11/jquery%E9%A1%B5%E9%9D%A2%E5%9B%BE%E7%89%87%E7%AD%89%E5%85%83%E7%B4%A0%E6%BB%9A%E5%8A%A8%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%E5%AE%9E%E7%8E%B0/