Retina-ready Image Lazy Loader Plugin - jQuery lazy-images

Retina-ready Image Lazy Loader Plugin - jQuery lazy-images

版本:

浏览量:1089

最后更新:2021-09-12

应用标签:Jquery插件MAC 软件git

推荐指数:

详细信息

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激活高度

联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

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

正在加载二维码...

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

发表评论

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