解决TAB切换需拉一下才触发Lazyload懒加载方法

在之前的教程中，我们介绍了Jquery图片懒加载实现方法，在制作图片网站时，Lazyload懒加载非常有效的提升网站打开速度。

但是也存在这样的问题，当网页使用了Lazyload懒加载，并且网页上也有TAB切换时，就会出现一个问题，用户点击TAB切换时，新的图片并不会加载出来，而需要手动拉一下就会触发Lazyload懒加载。

这种情况对于用户体验来说并不友好，怎么解决这样的问题呢？下面学做网站论坛介绍一下解决方法。

处理方法就是通过给TAB绑定事件，监控TAB的切换时触发Lazyload懒加载。代码如下：

<script src="js/jquery.lazyload.js"></script>

<script>

//基础的懒加载触发

$("img.lazy").lazyload({effect: "fadeIn"});

</script>

<script type="text/javascript">

//给TAB切换里的LI绑定点击事件，来触发懒加载

$('.slideTxtBox .hd li').click(function () {

$("img.lazy").lazyload({effect: "fadeIn"});

});

</script>

通过给TAB切换里的LI绑定点击事件，来触发懒加载，就可以解决TAB切换需拉一下才触发Lazyload懒加载的问题，很好的提升了网站的用户体验。