相關免費學習推薦：javascript（影片）
在web 應用程式中效能至關重要。你可以擁有世界上最漂亮、最吸引人的網站，但如果它不能在瀏覽器上快速加載，人們會傾向於略過它。要使你的網站表現得非常好，可能相當棘手。這是因為 web 開發中存在許多瓶頸，例如高代價的 JavaScript、緩慢的 web 字體顯示、笨重的圖片資源等等。
本文我們主要關注圖片資源對網站的影響。根據 Jecelyn 研究，一個網頁只用於載入圖片平均就要消耗 5MB 的資料。這對用戶來說可能是一個沉重的負擔，因為某些國家的行動數據非常昂貴。用戶也會遇到網站載入時間過久的問題，尤其是在網路速度較慢的情況下。這些都會對你的網站產生負面影響。
根據 Jakob Nielson 研究，以下是你應該記住的重要統計數據：
有幾種策略可以為網站的圖片資源提供高效服務，而不會影響效能和質量，懶載入就是其中之一。懶加載是指只載入所需的內容，並將其餘內容延遲到需要的時候。這個策略可以應用於圖片、影片、文字和其他類型的資料。但大多數情況下，它適用於圖片資源等笨重內容。
有好幾種方法可以在網站上實現圖片懶加載。例如可以使用 Intersection Observer API，或使用事件處理程序來確定元素是否在檢視中。還有幾個功能強大的 JavaScript 程式庫，可以根據需要和相容性使用以下幾種圖片懶加載庫的方法。讓我們來看看吧！
Lazy Sizes 是目前最好的懶加載庫之一，在 Github 上擁有超過 14.1K 收藏，把它壓縮後只有 3.4kB。它還支援大約 98.5% 的瀏覽器用戶，同時它的文檔也寫的簡單易懂。
IntersectionObserver、MutationObserver 和 getElementsByClassName 等。 你可以在這裡查看範例。
Lozad.js 支援圖片、iframe、廣告、影片和其他元素的懶載入。它在 Github 上擁有近 6.4K 收藏，在社區裡非常受歡迎。據研究小組稱，這個庫被特斯拉、多米諾、小米和 BBC 等幾個品牌的網路應用程式所使用。它非常小巧，壓縮後只有 1.1kB。由於它使用 IntersectionObserver API 和 MutationObserver API，所以它支援大約 92% 的瀏覽器使用者。
getBoundingClientRect() 的函式庫更有效率。 你可以在這裡查看範例。
Tuupola 的 Lazyload 是 Github 上另一個流行的圖片懶加載庫，有近 8.4K 收藏。它使用了 IntersectionObserver API，並且簡單易用。壓縮後僅有 956 bytes，比其他的庫都小。這可以歸功於它只使用了 IntersectionObserver API，因為其他函式庫使用了別的組合來實現更好的相容性和效能。此外，由於這一點，目前 92% 的瀏覽器用戶都支援它。
IntersectionObserver API。 Vanilla lazy load 是另一個用於延遲載入圖片、影片和 iframe 的純粹 JavaScript 函式庫。它在 Github 上非常受歡迎，有將近 1500 個儲存庫和套件可供使用。它在 NPM 中每年有超過 190 萬次的下載。把它壓縮後僅有 2.7kB。與其他程式庫類似，該程式庫使用 IntersectionObserver API，92% 的瀏覽器使用者支援該程式庫。
你可以在這裡查看範例。
Yall.js 是另一個JavaScript 函式庫，也只使用IntersectionObserver API 來延遲載入圖片、影片、iframe 和CSS 背景圖。這個庫大約有 1.1K 收藏，並且有 91 個用戶在其項目庫中使用。這個庫可以壓縮到 1kB。如我們在先前的函式庫中所見，因為使用了 IntersectionObserver API，Yall.js 也支援 92% 的瀏覽器使用者。必須注意，如果瀏覽器不支援 IntersectionObserver API，則不會有備份。在那種情況下你必須用 polyfill 。
MutationObserver API 支援動態載入元素的偵測。 requestIdleCallback 方法優化瀏覽器空閒時間。 src 屬性直接實作 LQIP。 Layzr.js 是一個基於 JavaScript 的輕量級圖片懶載入函式庫。它主要使用 Element.classList，很少有 ES5 陣列方法和 requestAnimationFrame 方法。由於這些 API，97% 以上的瀏覽器使用者都支援該程式庫。 Layzr.js 在 Github 上擁有超過 5.6K 收藏，非常受歡迎，把它壓縮後只有 1kB。
你可以在這裡查看範例。
Blazy.js 是另一個輕量級的JavaScript 懶載入庫，能夠處理圖片、影片和iframe。它在 Github 上非常流行，有 2.6K 收藏，目前有超過 860 個開源專案庫在使用。它壓縮後只有 1.9kB。
使用 Element.getBoundingClientRect() 方法，與實作 IntersectionObserver API 的其他程式庫相比，該方法可能無法執行。但由於這種方法，這個函式庫有超過 98% 的瀏覽器使用者支援。它也使用 Element.closest()。這個 API 的瀏覽器支援率僅超過 94%。在這種情況下，您不必擔心遺漏的 6%，因為庫包含一個用於不支援瀏覽器的 polyfill。
你可以在這裡查看範例。
Responsively lazy 也是用於圖片的懶加載庫。它的內容簡潔，壓縮後只有 1.1kB。由於它良好的語法實現，讓其從眾多庫中脫穎而出。上面我們討論過的大多數函式庫都要求您對禁用 javascript 的瀏覽器使用 noscript 標記，忽略 src 屬性等。但 lazy 可以使用傳統的 src 屬性，並為受支援的瀏覽器新增 srcset 和 src 屬性。這使得這個函式庫對搜尋引擎優化（SEO）友善。這個函式庫也使用 Element.getBoundingClientRect() 因此，因此強制佈局重排也會出現在該函式庫中。
此外，這個函式庫在 Github 上有近 1.1K 收藏，幾乎 95% 的瀏覽器使用者都支援這個函式庫。
你可以在這裡查看範例。
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中文網其他相關文章！
