学做网站培训课程介绍

当前位置:

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

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').on('click', function (e) {
$(window).trigger('scroll');
});
</script>

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

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 我们在进行DZ模板制作时,使用DIY功能去调用论坛中的不同版块的数据,由于DIY会自动增加外面的层,有时会导致某些模板的diy没反应,也有的只会显示不
  • 仿站时tab切换框怎么仿 知识问答 (119830 次浏览)
    老师您好,我学习了仿站课程,现在我想仿一个网站,里面有一个鼠标移动时就可以切换不同的内容。这样的tab切换框在仿站时怎么仿呢?tab切换
  • 在之前的教程中,我们介绍了Jquery图片懒加载实现方法,在制作图片网站时,Lazyload懒加载非常有效的提升网站打开速度。但是也存在这样的问题
  • 对于我们在制作图片网站时,一个版面上有大量的图片。用户进入我们网站后,如果图片全部同时加载的话,会严重拖慢网页打开速度,影响用户浏览体验。
  • 对于一些拥有大量图片的网站来说,如果一个页面有超过 50 张图片,就会造成网站页面加载太慢以及移动端耗费流量太大。为了解决这样的问题,可以使用La