響應式圖像延遲加載JS插件：lazySizes

Sponsor

想必不少前端人員了解 lazyLoader 這個圖像延遲加載插件，而 lazySizes 可以說是它的終極版，輕量級，不需要 jQuery 庫即可使用，方法更簡單，更多用途。

注：lazyLoader 圖像延遲加載：是指當你網站有很多圖像時，若一次性加載全部，那么網站會很慢，通過 lazyloader 插件可以實現圖片的延遲加載，當網頁比較長的時候，會先只加載用戶視窗內的圖片，視窗外的圖片會等到你拖動滾動條至后面才加載，這樣有效的避免了因圖片過多而加載慢的弊端。

lazySizes 比lazyLoader功能更多更強大，此外大小也只有5KB，并不影響圖像的SEO，下面來看看使用方法。

使用教程

使用是十分簡單的，并且不需要加入 jQuery 庫。

Step 1: 下載?lazysizes.min.js 插件并將其引入到你的網站上：

<script src=”lazysizes.min.js” async=””></script>

Step 2: 將?class=“lazyload” 添加要延遲加載的?<images> 或 <iframes> 即可。

<!— 默認方案 –>
<img data-src=”image.jpg” class=”lazyload” />

<!— 響應式方案，可自動調用對應整圖像尺寸 –>
<img
data-sizes=”auto”
data-src=”image2.jpg”
data-srcset=”image1.jpg 300w,
image2.jpg 600w,
image3.jpg 900w” class=”lazyload” />

<!– iframe 例子 –>
<iframe frameborder=”0″
class=”lazyload”
allowfullscreen=””
data-src=”//www.youtube.com/embed/ZfV-aYdU4uE”>
</iframe>

然而該插件還有更多的使用方式，比如讓圖像漸變加載，預加載低質量圖像，這些都是很不錯的體驗，詳細請瀏覽插件介紹頁。

推薦理由

1. 優化網站加載速度同時，并能讓網站節省流量；

2. 不需要其它JS庫，直接引用 lazysizes.js 即可，輕量級，約5.8KB；

3. 適用響應式圖像，可自動匹配圖像大小，可預加載低質量圖像提高體驗。

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。