用于 jQuery 的图像延迟加载器插件 -lazyload

用于 jQuery 的图像延迟加载器插件 -lazyload

版本:

浏览量:1008

最后更新:2021-09-12

应用标签:Jquery插件gitMAC 软件

推荐指数:

详细信息

如您所知,页面加载时间是谷歌排名最重要的因素之一。加载时间越短,对 SEO 越好。lazyload 是这样一个 jQuery/JavaScript 插件,它延迟加载长网页中的许多大图像以减少加载时间。它支持淡入效果、超时加载效果、触发加载、海量图像和宽容器。取决于 Intersection Observer API

这一原则已在各种社交媒体服务中使用多年,如 pinterest、facebook、twitter等。您最好将此插件与Back To Top插件一起使用,例如 Smooth Page Scroll to Top with jQuery

如何使用它(v2.x):

1.包含jQuery库和lazyload.js

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/lazyload.js"></script>

2. 在data-src属性中定义图像的路径

<!-- grey.gif is a 1×1 pixel grey gif, used as a placeholder image -->
<img class="lazyload" src="img/grey.gif" data-src="img/example.jpg"  width="640" heigh="480">

3. 该插件还支持响应式图像

<img class="lazyload"
     src="thumbnail.jpg"
     data-src="normal.jpg"
     data-srcset="normal.jpg 1x, retina.jpg 2x">

4. 调用图像上的函数并完成。

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

4. 默认插件设置。

$("img.lazyload").lazyload({
  src: "data-src",
  srcset: "data-srcset",
  selector: ".lazyload",
  root: null,
  rootMargin: "0px",
  threshold: 0
});

更改日志:

v2.0.0rc2 (2019-04-12)

  • IE11 不支持箭头函数

  • 添加缺少的标题块

v1.9.7 (2015-08-28)

  • 版本更新

v1.9.5 (2015-04-20)

  • 版本更新。

v1.9.4 (2015-04-02)

  • 版本更新。

v1.9.4 (2015-02-26)

  • 版本更新。

v1.9.3 (2014-01-27)

  • 版本更新。

v1.9.2 (2014-01-15)

  • 版本更新。

v1.9.1 (2013-11-17)

  • 修复 iPhone 的 iOS5 检测(Berik Visschens)

  • 使用 .attr() 而不是 .data() 因为 jQuery 在使用后者时缓存值。修复 #37、#144 和 #101(Lorenz an Mey)。

  • 不要为非图像元素添加 data:uri 占位符。

联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。