标签: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