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

版本:

浏览量:978

最后更新：2021-09-12

推荐指数:

查看演示点击下载

详细信息

如您所知，页面加载时间是谷歌排名最重要的因素之一。加载时间越短，对 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
});