详细信息
lazy-images 是一个 jQuery 延迟加载器插件，它通过延迟加载图像直到它们滚动到视图中来提高页面加载速度。
支持视网膜图像 (@2x) 和自定义 CSS 样式。
也可以看看：
10 个最佳延迟加载 jQuery 插件
十大延迟加载 JavaScript 库
如何使用它：
1. 加载 JQuery 库后加载缩小版的 jQuery lazy-images 插件。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script src="./js/lazy-images.min.js"></script>2. 将图像包装成任何元素，如下所示。确保容器元素的类名称为“lazy-images”。
数据类：附加 CSS 类
数据样式：自定义 CSS 样式
数据图像：图像的路径
data-retina：视网膜图像的路径
data-alt：替代文本
<div class="example">
<span class="lazy-image"
data-class="yourClass"
data-style="border: 1px solid #000"
data-image="/path/to/image.jpg"
data-retina="/path/to/image@2x.jpg"
data-alt="Image Alt">
</span>
</div>3.noscript当您的用户在其浏览器中禁用脚本时，将原始图像插入标签以正常加载图像。
<noscript>
<img class="yourClass" src="/path/to/image.jpg" alt="Image Alt">
</noscript>4. 调用顶部容器上的插件。完毕。
$(document).ready(function(){
$(".example").lazyImages();
});变更日志：
2020-02-11
错误修正
2019-09-28
达日在lazyload激活高度
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。