手动触发 Lazyload 显示懒加载的图片

简介我们在做网站的时候,经常会对网页上的图片用到Lazyload懒加载,但是也时常会遇到一个问题:当我们在Tab切换中使用Lazyload的时候,会发现tab切换过来之后,图片并不能马上加载,而是需要下拉一下滚动条才能显示图片,否则就会显示一个Lazyload站位的图片(一般为灰色或白色)很影响用户体验。站长图库找了很多资料,最后发现只需要手动触发下绑定窗口的滚动事件重新计算就可以实现手动触发Lazy

  

我们在做网站的时候,经常会对网页上的图片用到Lazyload懒加载,但是也时常会遇到一个问题:

当我们在 Tab 切换中使用Lazyload的时候,会发现tab切换过来之后,图片并不能马上加载,而是需要下拉一下滚动条才能显示图片,否则就会显示一个Lazyload 站位的图片(一般为灰色或白色)很影响用户体验。

站长图库找了很多资料,最后发现只需要手动触发下绑定窗口的滚动事件重新计算就可以实现手动触发Lazyload懒加载事件了。

//监听tab切换,回调中执行以下代码即可:$(window).trigger('scroll');

如:

$('li').on('click',function(e){$(window).trigger('scroll');//触发下绑定窗口的滚动事件重新计算});

以上,就是手动触发 Lazyload 显示懒加载的图片的方法,希望对大家有所帮助!

下载链接:网站源码/小程序源码/网站模板下载

网站技巧

替换uploadify用Huploadify实现上传图片或文件

2024-9-19 19:44:19

网站技巧

WordPress纯代码实现前端页面HTML完美压缩

2024-9-19 19:44:21

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧