Notice: Trying to access array offset on value of type bool in /www/wwwroot/weimahe.com/wp-content/advanced-cache.php on line 472

Notice: Trying to access array offset on value of type bool in /www/wwwroot/weimahe.com/wp-content/advanced-cache.php on line 472
图片懒加载 lazyload.js ( jquery.lazyload.js ) 使用详解 - 微码盒
!
也想出现在这里? 联系我们
广告位

图片懒加载 lazyload.js ( jquery.lazyload.js ) 使用详解

lazyload.js 既 jquery.lazyload.js,作者 Mika Tuupola 。2.0 版本后插件不再依赖 jQuery ,之前的版本是依赖 jQuery 的,之前的默认使用自定义的 data-original (可修改)保存真实图片地址,2.0 之后新版本使用 data-src 保存真实图片地址,另外,设置参数调整较多。

对于一些图片使用比较多的网站,可能网页加载会比较慢,同时过多的请求也会造成服务器压力。 lazyload.js 可以很好地实现对于一些长网页,当网站用户未滑动到底部时不加载图片,直到用户滑动到指定位置时再发出请求,加载指定的图片。

lazyload.js 的实现说来也简单,它通过将 img 的 src 属性设置为一张公用的小尺寸图片,然后将真实图片链接存入到 data-src 属性中,直到触发加载时向服务器发送请求加载真实图片并将其设置为 src 属性来实现图片的懒加载。下面我们简单说下 lazyload.js 的使用方法。

引入 lazyload.js 文件

照常例,使用 lazyload.js 之前我们需要先引入它:

  1. <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>

编辑 HTML 文件

引入之后编辑适当的 HTML 代码即可,只需要在 img 标签中添加 data-src 属性及 lazyload 类即可,如下所示:

  1. <img class="lazyload" data-src="img/example.jpg" width="765" height="574" />
  2. <img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg" width="765" height="574" />

基本上是这两种方式,不过如果未设置 src 属性的话可能导致网站布局错乱,为此可以预加载一张缩略图占位。

lazyload.js 实现图片懒加载

使用如下工厂方法对插件进行初始化,如果未设置图像元素筛选需要懒加载的图像的话,默认插件会查找 lazyload 类名对所有图像进行懒加载。

  1. lazyload();

当然你也可以为其制定具体的元素,如下所示:

  1. let images = document.querySelectorAll(".branwdo");
  2. lazyload(images);

当然,使用构造函数的方式也可以:

  1. let images = document.querySelectorAll(".branwdo");
  2. new LazyLoad(images);

而且你还可以向其传递一些参数哦:

  1. new LazyLoad(images, {
  2. root: null,
  3. rootMargin: "0px",
  4. threshold: 0
  5. });

额外的 API

lazyload.js 提供了一些额外的 API 使用这些 API 前需要先声明一下:

  1. let lazy = lazyload();

要强制加载所有图片可以:

  1. lazy->loadImages();

要停止使用 lazyload 可以:

  1. lazy->destroy();

需要注意的是 destroy() 不会继续加载可视区域外的图像,想要加载这些图像可以用 loadAndDestroy():

  1. lazy->loadAndDestroy();

jQuery 框架使用方法

如果使用了 jquery 则可以使用老方法调用 lazyload ,值得注意的是以前的版本使用 data-original 保存的真实图片地址。

  1. <img class="lazyload" data-original="img/example.jpg" width="765" height="574">
  2. <img class="lazyload" src="img/example-thumb.jpg" data-original="img/example.jpg" width="765" height="574">
  1. $("img.lazyload").lazyload();

2.x 之前版本使用方法

上面基本是按照作者 2.x 新版本源文档翻译过来的,2.x 新版本尚未正式发行,因为主题基于 jQuery ,WordPress 也使用了 jQuery ,所以还是说下基于 jQuery 的老版本的设置方法吧!

同样的引入方法:

  1. <script src="jquery-1.11.0.min.js"></script>
  2. <script src="jquery.lazyload.js?v=1.9.7"></script>

HTML 书写方式:

  1. <img class="thumb" src="img/example-thumb.jpg" data-original="img/example.jpg">

懒加载调用方法:

  1. $("img.thumb").lazyload();

截取了 Version: 1.9.7 源码的默认配置界面大家可以简单看下,主要讲下这几个参数的配置

  • threshold:设置距离窗口底部或右侧多少像素时开始预加载图片,默认为 0 ,即出现在可视区时加载
  • failure_limit:控制加载顺序,一般情况下在文档流中的图片会按顺序逐一加载,复杂布局的可适当上调此值,默认为 0 ,即按文档流逐一加载
  • event:处理图片延迟加载的事件,默认的是 scroll ,即滚动到指定位置
  • effect:图片加载效果,默认 show ,即直接显示
  • container:在指定容器内使用 Lazyload ,默认 window 即窗体内所有查找到的图片
  • data_attribute:图片延迟加载的图片地址属性后缀,data 为前缀,默认为 original ,即真实图片存放在 data-original 中
  • skip_invisible:显示隐藏的图片(visibility: hidden;),默认 false ,即忽略隐藏图片
  • appear:在图片加载之前到显示图片之间的处理函数,一般用于展示加载动画,默认为空
  • load:图片加载完毕之后执行的函数,默认为空
  • placeholder:显示图片之前的图片占位符,默认 base 64 图片编码

给TA打赏
共{{data.count}}人
人已打赏
前端学习

HTML+CSS+JS实现今天的日期和今天剩余的时间

2024-7-15 14:48:14

前端学习

使用CSS3实现酷炫的3D旋转透视

2024-7-16 14:48:16

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索