标签：ide img 特殊情况 延时 code his data- div 切换
同步延时加载
页面延迟加载，即分屏显示，用户滚动页面，切换页面时显示当前屏幕的图片
原理：将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"); } }); }
标签：ide img 特殊情况 延时 code his data- div 切换
原文地址：http://www.cnblogs.com/ndood/p/6127217.html
