如题。
最近在进行开发的项目中,有一个网页需要使用非常多的图片,那么必须对图片的加载做优化。使用流式加载图片的方法是绝对不行,对服务器的带宽将是非常大的考验,于是,我考虑使用图片的异步加载。
在网上寻找插件,最终让我找到一个非常牛逼的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的工作原理还是有一定的帮助的。