详细信息
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
});
});
发表评论
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。