页面延迟加载，即分屏显示

页面延迟加载，即分屏显示，用户滚动页面，切换页面时显示当前屏幕的图片
原理：将img的地址暂时存在一个属性中，如data-original，而让src为空，等到鼠标滚动的时候，响应一个事件（$(this).trigger('appear');），此时会把data-original中的地址取出来，放入src
1：引入jquery.lazyload.js，该js最好放在页面的最下面
2：给img添加延迟属性
如：<img class="lazy" src="/images/loading.gif" data-original="<s:property value="#prodList.picURL"/>" width="178" height="190" title="<s:property value="prodName" escape="false"/>"/>

其中:data-original为暂时存放图片地址的属性，src可以为空，或者用其它图片代替
3:添加延迟加载
$(function(){
$("img.lazy").lazyload();
});

特殊情况：如多个菜单切换的时候，延时加载无效，因为jquery.lazyload.js只做了srcoll时才加载，此时可以自定义一个js，切换时响应如下js即可
菜单切换：
$("#prod"+position1+"_"+position2).find('img.lazy').each(
function(){
$(this).trigger('appear');
}
);

点击切换：
function loadSlidImage(){
$("img[name='slide']").each(function(){
if(this.src.indexOf("loading.gif")>-1){
$(this).trigger("appear");
}
});
}