Responsively Lazy延迟加载响应式图像的库-技术圈

Responsively Lazy延迟加载响应式图像的库

联合创作 · 2023-09-22 01:49

Responsively Lazy 是一个可以延迟加载响应式图像的库。能够处理响应式图像、SEO 友好（有效的 HTML）并支持 WebP 格式。

下载并安装

下载缩小后的 css 和 js 文件或通过 npm 和 bower 安装

npm install responsively-lazy

bower install responsively-lazy

该库没有任何依赖项，它只有 1.1kb。

用法

在 head 标签中包含 css 文件

<link rel="stylesheet" href="responsivelyLazy.min.css">

在 body 标签结束前包含 js 文件

<script async src="responsivelyLazy.min.js"></script>

为每张图片添加以下代码

<div class="responsively-lazy" style="padding-bottom:68.44%;">
    <img alt="" src="images/2500.jpg" srcset="images/400.jpg 400w, images/400.webp 400w, images/600.jpg 600w, images/1000.jpg 1000w" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
</div>

要自定义的内容是 padding-bottom 样式，以及 src 和 srcset 属性的值。如果不知道图像纵横比，可以跳过 div 标签并将 Responsively Lazy 类移动到 img 标签：

<img class="responsively-lazy" alt="" src="images/2500.jpg" srcset="images/400.jpg 400w, images/400.webp 400w, images/600.jpg 600w, images/1000.jpg 1000w" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />

如果浏览器支持，可以以 WebP 格式列出图像版本。

浏览器支持

Responsively Lazy 适用于支持 srcset 属性的浏览器。不受支持的浏览器将在 src 属性中加载图像。

编辑分享