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

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

作者:站长图库 字体:[增加 减小] 来源:互联网

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

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

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

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

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

如:

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

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



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

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

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

相关文章

  • ThinkPHP5访问怎么去除/public/index.php
  • tp5怎么隐藏admin.php
  • Photoshop详细解析斜面浮雕和等高线原理
  • 解决微信video、audio 无法自动播放的问题
  • 利用promise及参数解构封装ajax请求的方法
  • 浅谈小程序中实现下拉刷新与加载更多效果的方法
  • 虚拟空间如何获取帝国CMS手机端路径
  • 如何增加外链,增加外链方法汇总
  • 详解PHP中高精度计时器HRTime扩展
  • 搜索引擎优化10大黄金法则

文章分类

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

最近更新的内容

    • Laravel中用Observer事件致Redis队列异常问题
    • curl获取结果乱码的解决方法
    • vue实现一个获取按键展示快捷键效果的Input组件
    • uniapp如何设置动态样式
    • 浅析Angular+rxjs怎么实现拖拽功能?
    • PHP中如何利用define定义常量
    • 浅析uni-app中怎么提交form表单?(代码解析)
    • 一文讲解Wordpress插件怎么查找并安装
    • 深入了解PHP中的序列化和反序列化
    • 最新消息!WordPress 5.8开始将不再支持IE11浏览器

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

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