給大家分享九個 JavaScript 圖片懶載入庫

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 的懶加載庫以及一些提高效率和改善用戶體驗的方法。請在下面的評論中發表你的看法。

感謝閱讀，祝程式設計快樂！ ！

以上是給大家分享九個 JavaScript 圖片懶載入庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！