Responsively Lazy延遲加載響應(yīng)式圖像的庫
Responsively Lazy 是一個可以延遲加載響應(yīng)式圖像的庫。能夠處理響應(yīng)式圖像、SEO 友好（有效的 HTML）并支持 WebP 格式。
下載并安裝
下載縮小后的 css 和 js 文件或通過 npm 和 bower 安裝
npm install responsively-lazy
bower install responsively-lazy
該庫沒有任何依賴項，它只有 1.1kb。
用法
- 在 head 標(biāo)簽中包含 css 文件
<link rel="stylesheet" href="responsivelyLazy.min.css">
- 在 body 標(biāo)簽結(jié)束前包含 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>
要自定義的內(nèi)容是 padding-bottom 樣式，以及 src 和 srcset 屬性的值。如果不知道圖像縱橫比，可以跳過 div 標(biāo)簽并將 Responsively Lazy 類移動到 img 標(biāo)簽：
<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 屬性中加載圖像。
評論
圖片
表情