JavaScript圖片懶加載庫有哪些

這篇文章給大家分享的是有關JavaScript圖片懶加載庫有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

為什么要圖片懶加載

在 web 應用程序中性能至關重要。你可以擁有世界上最漂亮、最吸引人的網站，但如果它不能在瀏覽器上快速加載，人們會傾向于略過它。要想使你的網站表現得非常好，可能相當棘手。這是因為 web 開發中存在許多瓶頸，例如高代價的 JavaScript、緩慢的 web 字體顯示、笨重的圖片資源等等。

本文我們主要關注圖片資源對網站的影響。根據 Jecelyn 研究，一個網頁僅用于加載圖片平均就要消耗 5MB 的數據。這對用戶來說可能是一個沉重的負擔，因為某些國家的移動數據非常昂貴。用戶也會遇到站點加載時間過久的問題，尤其是在網速較慢的情況下。這些都會對你的網站產生負面影響。

根據 Jakob Nielson 研究，以下是一些你應該記住的重要統計數據：

• 網站加載時間低于 100 毫秒被認為是瞬時的。
• 100 到 300 毫秒之間的延遲是可以感知到的。
• 47% 的消費者希望網頁在兩秒鐘或更短的時間內加載完成。
• 40% 的消費者在放棄網站之前，將等待不超過 3 秒加載時間。

懶加載是什么

有幾種策略可以為網站的圖片資源提供高效服務，而不會影響性能和質量，懶加載就是其中之一。懶加載是指只加載所需的內容，并將其余內容延遲到需要的時候。這個策略可以應用于圖片、視頻、文本和其他類型的數據。但大多數情況下，它適用于圖片資源等笨重內容。

有好幾種方法可以在網站上實現圖片懶加載。例如可以使用 Intersection Observer API，或者使用事件處理程序來確定元素是否在視圖中。還有幾個功能強大的 JavaScript 庫，可以根據需要和兼容性使用以下幾種圖片懶加載庫的方法。讓我們來看看吧！

Lazy Sizes

Lazy Sizes 是目前最好的懶加載庫之一，在 Github 上擁有超過 14.1K 收藏，把它壓縮后只有 3.4kB。它還支持大約 98.5% 的瀏覽器用戶，同時它的文檔也寫的通俗易懂。

特點

• 包含對響應式圖片的支持。
• 通過在用戶代理的幫助下檢測搜索引擎并立即加載所有圖像，從而優化 SEO。
• 基于高效實用的代碼。
• 當網絡連接空閑時預先加載資源。
• 包含對 LQIPs 的支持。
• 支持 IntersectionObserver、MutationObserver 和 getElementsByClassName 等。
• 支持使用插件來擴展特性。
• 支持自動計算響應圖片大小。

你可以在這里查看示例。

Lozad.js

Lozad.js 支持圖片、iframe、廣告、視頻和其他元素的懶加載。它在 Github 上擁有近 6.4K 收藏，在社區里非常受歡迎。據研究小組稱，這個庫被特斯拉、多米諾、小米和 BBC 等幾個品牌的網絡應用程序所使用。它非常小巧，壓縮后只有 1.1kB。由于它使用 IntersectionObserver API 和 MutationObserver API，所以它支持大約 92% 的瀏覽器用戶。

特點

• 不存在依賴關系。
• 支持動態添加元素的懶加載。
• 完全使用 JavaScript。
• 包含對 LQIPs 和響應圖片的支持。
• 比使用 getBoundingClientRect() 的庫更高效。
• Polyfills 可以在不受支持的瀏覽器上使用。

你可以在這里查看示例。

Tuupola 的 Lazyload

Tuupola 的 Lazyload 是 Github 上另一個流行的圖片懶加載庫，有近 8.4K 收藏。它使用了 IntersectionObserver API，并且簡單易用。壓縮后僅有 956 bytes，比其他的庫都小。這可以歸功于它只使用了 IntersectionObserver API，因為其他庫使用了別的組合來實現更好的兼容性和性能。此外，由于這一點，目前 92% 的瀏覽器用戶都支持它。

特點

• 為了方便起見，它包含了一個 jQuery 包裝器。
• 包括對 LQIPs 和響應圖片的支持。
• 可以通過傳遞其他參數來配置核心 IntersectionObserver API。

Andrea Verlicchi 的 Vanilla Lazyload

Vanilla lazy load 是另一個用于延遲加載圖片、視頻和 iframe 的純粹 JavaScript 庫。它在 Github 上非常受歡迎，有將近 1500 個存儲庫和包可供使用。它在 NPM 中每年有超過 190 萬次的下載。把它壓縮后僅有 2.7kB。與其他庫類似，該庫使用 IntersectionObserver API，92% 的瀏覽器用戶支持該庫。

• 搜索引擎優化友好，因為庫不從搜索引擎覆蓋圖片。
• 支持不穩定的網絡連接，因為庫會在連接中斷后自動重新加載圖片。
• 如果圖片退出視口，則取消加載圖片。
• 包含對 LQIPs 和響應圖片的支持。
• 完全使用 JavaScript。

你可以在這里查看示例。

Yall.js

Yall.js 是另外一個 JavaScript 庫，也只使用 IntersectionObserver API 來延遲加載圖片、視頻、iframe 和 CSS 背景圖片。這個庫大約有 1.1K 收藏，并且有 91 個用戶在其項目庫中使用。這個庫可以壓縮到 1kB。正如我們在以前的庫中所見，因為使用了 IntersectionObserver API，Yall.js 也支持 92% 的瀏覽器用戶。必須注意，如果瀏覽器不支持 IntersectionObserver API，則不會有備份。在那種情況下你必須用 polyfill 。

特點

• 借助 MutationObserver API 支持動態加載元素的檢測。
• 借助 requestIdleCallback 方法優化瀏覽器空閑時間。
• 支持通過 src 屬性直接實現 LQIP。
• 支持延遲加載 CSS 背景。

Layzr.js

Layzr.js 是一個基于 JavaScript 的輕量級圖片懶加載庫。它主要使用 Element.classList，很少有 ES5 數組方法和 requestAnimationFrame 方法。由于這些 API，97% 以上的瀏覽器用戶都支持該庫。Layzr.js 在 Github 上擁有超過 5.6K 收藏，非常受歡迎，把它壓縮后只有 1kB。

• 不存在依賴關系。
• 基于瀏覽器兼容性和可用性智能選擇圖片源。
• 支持動態添加的元素。
• 清晰簡潔的文檔和示例。
• 具有閾值屬性的視口調整圖片懶加載，可以根據需要提前或稍后加載圖片。

你可以在這里查看示例。

Blazy.js

Blazy.js 是另一個輕量級的 JavaScript 懶加載庫，能夠處理圖片、視頻和 iframe。它在 Github 上非常流行，有 2.6K 收藏，目前有超過 860 個開源項目庫在使用。它壓縮后只有 1.9kB。

使用 Element.getBoundingClientRect() 方法，與實現 IntersectionObserver API 的其他庫相比，該方法可能無法執行。但是由于這種方法，這個庫有超過 98% 的瀏覽器用戶支持。它還使用 Element.closest()。這個 API 的瀏覽器支持率僅超過 94%。在這種情況下，您不必擔心遺漏的 6%，因為庫包含一個用于不支持瀏覽器的 polyfill。

特點

• 用于每月訪問量達數百萬的實際網站。
• 不存在依賴關系。
• 支持響應圖片。
• 類似 Layzr.js 允許加載具有偏移量的元素。
• 帶有示例代碼的清晰文檔。
• 支持 AMD、CommonJS 和 globals 等模塊格式。
• 非常容易提供視網膜圖片。

你可以在這里查看示例。

Responsively Lazy

Responsively lazy 也是用于圖片的懶加載庫。它的內容簡潔，壓縮后只有 1.1kB。由于它良好的語法實現，讓其從眾多庫中脫穎而出。上面我們討論過的大多數庫都要求您對禁用 javascript 的瀏覽器使用 noscript 標記，忽略 src 屬性等。但是 lazy 可以使用傳統的 src 屬性，并為受支持的瀏覽器添加 srcset 和 src 屬性。這使得這個庫對搜索引擎優化（SEO）友好。這個庫也使用 Element.getBoundingClientRect() 因此，因此強制布局重排也將出現在該庫中。

此外，這個庫在 Github 上有近 1.1K 收藏，幾乎 95% 的瀏覽器用戶都支持這個庫。

特點

• 支持響應式圖片。
• 支持 webp。
• 對搜索引擎優化（SEO）友好。
• 可用的自定義項不多。

你可以在這里查看示例。

LazyestLoad.js

LazyestLoad.js 是此列表中最小的庫之一。它只有 700 字節，壓縮后僅僅 639 字節。這個庫有兩個版本，lazyload 和 lazyestload。它們都有不同的用法，lazyload 版本的工作方式與普通庫類似，圖片將在其即將進入視口時加載；但是 lazyestload 版本只在用戶停止滾動且圖片在視口中或在 100 像素以內時，才會加載圖片。這有助于減少網絡負荷，如果用戶只是滾動而不暫停看圖片。

它主要使用 Element.getBoundingClientRect() 方法，與其他實現相比效率不高，還有眾所周知的觸發布局重排。

這個庫只處理圖片，不像其他庫可以處理視頻和 iframe 的庫。它在 Github 上還有超過 1.5 萬收藏。

特點

• 簡單直截了當。
• 不允許像其他庫一樣進行大量自定義。
• 支持響應式圖片。
• 文檔不夠詳細。

你可以查看 lazyload 示例和查看 lazyestload 示例。

隨著大多數現代瀏覽器都將支持原生的懶加載，因此建議使用原生實現。原生懶加載還可以確保即使在瀏覽器中禁用 JavaScript，圖片也可以延遲加載。只需在 img 標記中使用 loading="lazy" 屬性，就可以省去所有麻煩。

大多數現代瀏覽器都支持原生懶加載，并且也即將支持 Safari 瀏覽器。目前，瀏覽器的支持率為 74%，如果瀏覽器不支持原生實現則可以使用 polyfill 或者上述懶加載庫中的某個庫。

為了安全起見，您可能仍需要使用動態導入來實現其中一個庫。

了解你的目標受眾

如果您仔細分析以上所有給定的庫，您會發現它們在三個方面存在激烈的競爭：性能、大小和瀏覽器兼容性（用戶覆蓋率）。這些通常不得不犧牲至少一個來提高另一個的水平。

例如，如果您使用實現 IntersectionObserver API 的庫，您將獲得一個高性能的庫，但它的用戶覆蓋范圍會更小。如果需要修補，則需要有后備選項，例如 polyfills，這將增加庫的整體大小。

在另一個示例中，如果懶加載庫使用 getBoundingClientRect() 方法，它的性能將不如 IntersectionObserver API，因為眾所周知它存在強制布局回流問題。雖然犧牲了性能，但用戶覆蓋率將高于前者。希望我能把這一點說清楚。

如何將兼容性問題降至最低并最大限度地提高性能？

可以通過了解目標受眾及其瀏覽器使用情況來改進這些方面。如果你知道你的目標受眾和他們使用的瀏覽器，你可以確保你的延遲加載的實現更適合那些瀏覽器版本。這將減少對不受支持的瀏覽器包含 polyfill 的需要，因為已經知道需要關注哪些瀏覽器。當你有一個異常值（不支持的瀏覽器），圖片可以直接加載沒有任何延遲或延遲。如果你對受眾有很好的了解，那么這些異常值的數量將可以忽略不計。

這種方法將有助于使用性能良好的實現庫，通過忽略瀏覽器異常將庫大小保持在最小值，并支持目標用戶的瀏覽器版本。

感謝各位的閱讀！關于JavaScript圖片懶加載庫有哪些就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！