详细信息
另一个基于 jQuery 的图像延迟加载插件通过在某些图像进入视口时延迟加载它们来加速您的网页和 Web 应用程序。
该插件循环遍历所有图像并用src属性替换本机属性的值data-src，然后完全删除该src属性以避免（取消）图像加载。
对于 Google Chrome 用户，您可以使用Native Lazy Loading来延迟加载文档中的图像：
<img src="jqueryscript.jpg" loading="lazy" alt="..." />如何使用它：
1.加载lazy-load.js最新的jQuery库后加载脚本。
<script src="/path/to/jquery-3.4.1.slim.min.js"></script>
<script src="/lazy-load/js/lazy-load.js"></script>2. 在data-src属性中定义图片路径。
<ul id="myList">
<li><img data-src="1.jpg"></li>
<li><img data-src="2.jpg"></li>
<li><img data-src="3.jpg"></li>
<li><img data-src="4.jpg"></li>
<li><img data-src="5.jpg"></li>
...
</ul>3. 将函数附加到图像容器并完成。
$(function(){
$('#myList').lazyLoad();
});4. 插件会自动为已经完全加载的图片添加CSS类'.loaded'。这样您就可以将自定义 CSS 动画应用于图像，如下所示。
ul.lazy-load li img {
display: block;
opacity: 0;
width: 100%;
transform: translateY(25%);
}
ul.lazy-load li img.loaded {
opacity: 1;
transform: translateY(0);
transition: all .5s ease;
}
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。