大家有没碰到过开启图片延迟下载后 如果是切换菜单里的图片不能自动加载,需要拖动一下滚动条才加载!
主要原因是jquery.lazyload默认是图片在可视区域内触发滚动时间才加载,所以切换菜单后需要滚动一下滚动条才能加载!!!
解决方法:
<ul class=".menu"> <li>菜单一</li> <li>菜单二</li> <li>菜单三</li> </ul> <div class="main"> <div class="m">图片一</div> <div class="m" style="display:none">图片二</div> <div class="m" style="display:none">图片三</div> </div> <!--js代码--> <script> var menu = $('.menu>li'); //切换菜单 var m = $('.main>div.m'); //图片容器 menu.hover(function(){ var i = menu.index(this); m.hide(); m.eq(i).show(); var top = $(window).scrollTop(); $(window).scrollTop(top+1); var top = $(window).scrollTop(); $(window).scrollTop(top-1); }); $('img').lazyload(); </script>
这样通过js自动滚动滚动条用户却看不出来,大大降低了打开页面的请求次数
已经测试过了 效果还不错!!!!!!!!