首页 > 教程 >
手动触发 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 显示懒加载的图片的方法,希望对大家有所帮助!
下载链接:网站源码/小程序源码/网站模板下载
下载排行
最新发布
-
最新去水印小程序源码分享/无需后台/对接接口/支持全网去水印功能
-
群多多社群人脉H5-2.1.4多开插件+小程序独立前端+搭建教程
-
七夕情侣飞行棋游戏限定版本源码/解锁版
-
苹果CMS海螺模版V20修复版/加广告代码
-
宠物社区风格 商业版(GBK)Discuz模板
-
全新UI基于Thinkphp的最新自助打印系统/云打印小程序源码/附教程
-
易优CMS家纺家居装饰类网站模板/EyouCMS家具家居类企业网站模板
-
EyouCMS艺术***摄影工作室网站模板/易优CMS摄影工作室网站模板
-
易优CMS响应式精品茶具实木茶盘销售网站模板/EyouCMS响应式酒水饮料类企业网站模板
-
EyouCMS响应式推土机挖掘机机械类网站模板/易优CMS机械设备类企业网站模板