• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > 手动触发 Lazyload 显示懒加载的图片

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

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了手动触发Lazyload,图片懒加载等相关知识,希望对您有所帮助

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

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

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

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

如:

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

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



分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

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

相关文章

  • 2022-04-29PHP如何只抓取网页头
  • 2022-04-29JavaScript实现UTF-8编解码
  • 2022-04-29支付宝企业账户转账个人账户PHP接口代码
  • 2022-04-29Bootstrap中switch的用法是什么
  • 2022-04-29苹果CMSV10播放器增加记忆+P2P播放+自动下一集功能
  • 2022-04-29PS鼠绘清纯可爱的古装卡通小女孩
  • 2022-04-29Photoshop使用计算工具调出别致的颜色
  • 2022-04-29CDR凿刻效果的制作技巧
  • 2022-04-29详解Thinkphp5整合grid++报表
  • 2022-04-29一分钟教会你php怎么快速匹配文章中的图片

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • Vue中Computed和Watch的用法及区别
    • 如何将label标签与input标签进行绑定
    • 如何使用yum安装指定版本的php
    • dedecms大量删除文章后,列表页显示错误修复办法
    • 一定要收藏的5个后台管理系统的前端框架
    • MySQL中 IN和NOT IN用法详解
    • CDR设计制作漂亮婚庆字体
    • html5的drag和drop的用法示例
    • Photoshop制作金属颓废效果的黄金字教程
    • 浅析Node.js中zip压缩和zip解压缩

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有