首页 > 教程 >

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

2023-02-14教程围观

简介我们在做网站的时候,经常会对网页上的图片用到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 显示懒加载的图片的方法,希望对大家有所帮助!



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

Tags: 图片 加载 显示 手动 触发