网页 从其他服务器 加载图片,实现网页图片的异步加载

如题。

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

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

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

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

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

JS：

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

effect : "fadeIn"

});

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

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

threshold : 200

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

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

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