responsively-lazy是一款非常實用的可實現響應式圖片懶載入的js外掛。它可以根據容器的大小來智慧選擇載入適合尺寸的圖片，做到圖片的響應式效果。並且使用它對於SEO是十分友好的。該圖片懶載入外掛的特點還有：
（1）響應式圖片
（2）不做任何不必要的請求
（3）可以在任何支援srcset的瀏覽器中工作
（4）智慧處理載入的合適尺寸的圖片
（5）在舊的瀏覽器中不會破壞佈局
本經驗分享如何使用responsively-lazy響應式圖片懶載入
工具/原料
膝上型電腦或是桌上型電腦
網際網路
responsively-lazy外掛
方法/步驟
使用該圖片懶載入外掛需要引入responsivelyLazy.min.css和responsivelyLazy.min.js檔案。
為你需要進行懶載入的圖片新增下面的HTML結構：
你需要自定義
。
完整的程式碼如下圖所示：
data-srcset="images/600.jpg 600w, images/400.jpg 400w, images/800.jpg 800w, images/1500.jpg 1500w, images/1000.jpg 1000w, images/2000.jpg 2000w" />
data-srcset="images/600.jpg 600w, images/400.jpg 400w, images/800.jpg 800w, images/1500.jpg 1500w, images/1000.jpg 1000w, images/2000.jpg 2000w" />
data-srcset="images/600.jpg 600w, images/400.jpg 400w, images/800.jpg 800w, images/1500.jpg 1500w, images/1000.jpg 1000w, images/2000.jpg 2000w" />
data-srcset="images/600.jpg 600w, images/400.jpg 400w, images/800.jpg 800w, images/1500.jpg 1500w, images/1000.jpg 1000w, images/2000.jpg 2000w" />
執行效果如下圖所示：
本外掛瀏覽器相容性如下圖所示：
注意事項
本外掛無需依賴JQuery庫