大家有没碰到过开启图片延迟下载后 如果是切换菜单里的图片不能自动加载,需要拖动一下滚动条才加载!
主要原因是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自动滚动滚动条用户却看不出来,大大降低了打开页面的请求次数
已经测试过了 效果还不错!!!!!!!!
























18605917465
客服QQ