Responsively Lazy延迟加载响应式图像的库
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 属性中加载图像。
评论