延迟图像加载以防止速率限制 - lazyrate.js

延迟图像加载以防止速率限制 - lazyrate.js

版本:

浏览量:181

最后更新:2021-09-10

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

lazyrate.js 是一个 jQuery 插件,它提供了一种独特的方式来延迟文档中一系列图像的加载。可用于防止因图像加载过快而导致的速率限制问题。

当序列中的第一张图像被加载后,插件会在后续的图像加载过程中应用延迟,在此期间浏览器在开始加载下一张图像之前等待指定的时间段。

如何使用它:

1.加载jQuery后放置jquery.lazyrate.js脚本(推荐slim build)。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.lazyrate.js"></script>

2. 将占位符图像添加到页面并使用data-src属性指定图像的真实路径请注意,每个图像必须具有唯一的 ID,如下所示:

<img id="img01"
     data-src="1.jpg"
     src="placeholder.png"
     class="lazyrate" />
<img id="img02"
     data-src="2.jpg"
     src="placeholder.png"
     class="lazyrate" />
<img id="img03"
     data-src="3.jpg"
     src="placeholder.png"
     class="lazyrate" />
<img id="img04"
     data-src="4.jpg"
     src="placeholder.png"
     class="lazyrate" />
<img id="img05"
     data-src="5.jpg"
     src="placeholder.png"
     class="lazyrate" />

3. 调用图像上的函数并确定以毫秒为单位的延迟。默认值:200 毫秒。

$(document).ready(function () {
  $(".lazyrate").lazyRate({
    delay: 1000
  });
});

发表评论

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