在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片，占的几M的空间。图片延迟加载(ImageLazyLoad)技术就是，当前可见界面的图片是加载进来的，而不可见页面（通过滚动条下拉可见）中的图片是不加载的，这样势必会引起速度上质的提升。 

这样的效果很好的提高了用户的体验，又降低了对服务器的请求压力。而且使用起来也非常简单。

1、这个插件是基于JQuery框架实现的，所以需要在模版中引用JQuery.js。

2、下载图片延迟加载功能js，同样引用在模版上。

3、将下列代码放到模版中

jQuery(document).ready(

function($){

$("img").lazyload({

     placeholder : "", //加载图片前的占位图片

     effect      : "fadeIn" //加载图片使用的效果(淡入)

});

});

做完了以上操作就可以在前台刷新看看效果了。

查看演示效果： 演示地址

js代码下载：图片延迟加载插件下载

以下再提供一个引用google服务器上的js来实现本地功能，这样就更方便了。不用下载js，直接复制以下代码放到页面模版中就可以了。

jQuery(document).ready(

function($){

$("img").lazyload({

     placeholder : "", //加载图片前的占位图片

     effect      : "fadeIn" //加载图片使用的效果(淡入)

});

});