我们在做网站的时候,经常会对网页上的图片用到Lazyload懒加载,但是也时常会遇到一个问题:
当我们在Tab切换中使用Lazyload的时候,会发现tab切换过来之后,图片并不能马上加载,而是需要上下滚动一下页面才能显示图片,否则就会显示一个Lazyload占位的图片(一般为灰色或白色)很影响用户体验。
找了很多资料,最后发现只需要手动触发下绑定窗口的滚动事件重新计算就可以实现手动触发Lazyload懒加载事件了。
//监听tab切换,回调中执行以下代码即可: $(window).trigger('scroll');
如:
$('li').on('click', function (e) { $(window).trigger('scroll');//触发下绑定窗口的滚动事件重新计算 });
li改成对应的class标签即可。
还有另外一种解决方法,这里也记录下。
设置event为sporty
$("img.lazy").lazyload({ effect: "fadeIn", event: "sporty", });
然后当Tabs标签单击时触发sporty
$("img.lazy").trigger("sporty");
以上,就是手动触发Lazyload显示懒加载的图片的方法,希望对大家有所帮助!