通过延迟加载图像来加速您的网页 - jQuery 延迟加载

通过延迟加载图像来加速您的网页 - jQuery 延迟加载

版本:

浏览量:1106

最后更新:2021-09-12

应用标签:gitJquery插件MAC 软件

推荐指数:

详细信息

另一个基于 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;
}
联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

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