JavaScript圖片懶加載庫有哪些

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

為什么要圖片懶加載

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

本文我們主要關(guān)注圖片資源對網(wǎng)站的影響。根據(jù) Jecelyn 研究，一個(gè)網(wǎng)頁僅用于加載圖片平均就要消耗 5MB 的數(shù)據(jù)。這對用戶來說可能是一個(gè)沉重的負(fù)擔(dān)，因?yàn)槟承﹪业囊苿訑?shù)據(jù)非常昂貴。用戶也會遇到站點(diǎn)加載時(shí)間過久的問題，尤其是在網(wǎng)速較慢的情況下。這些都會對你的網(wǎng)站產(chǎn)生負(fù)面影響。

根據(jù) Jakob Nielson 研究，以下是一些你應(yīng)該記住的重要統(tǒng)計(jì)數(shù)據(jù)：

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

懶加載是什么

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

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

Lazy Sizes

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

特點(diǎn)

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

你可以在這里查看示例。

Lozad.js

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

特點(diǎn)

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

你可以在這里查看示例。

Tuupola 的 Lazyload

Tuupola 的 Lazyload 是 Github 上另一個(gè)流行的圖片懶加載庫，有近 8.4K 收藏。它使用了 IntersectionObserver API，并且簡單易用。壓縮后僅有 956 bytes，比其他的庫都小。這可以歸功于它只使用了 IntersectionObserver API，因?yàn)槠渌麕焓褂昧藙e的組合來實(shí)現(xiàn)更好的兼容性和性能。此外，由于這一點(diǎn)，目前 92% 的瀏覽器用戶都支持它。

特點(diǎn)

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

Andrea Verlicchi 的 Vanilla Lazyload

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

• 搜索引擎優(yōu)化友好，因?yàn)閹觳粡乃阉饕娓采w圖片。
• 支持不穩(wěn)定的網(wǎng)絡(luò)連接，因?yàn)閹鞎谶B接中斷后自動重新加載圖片。
• 如果圖片退出視口，則取消加載圖片。
• 包含對 LQIPs 和響應(yīng)圖片的支持。
• 完全使用 JavaScript。

你可以在這里查看示例。

Yall.js

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

特點(diǎn)

• 借助 MutationObserver API 支持動態(tài)加載元素的檢測。
• 借助 requestIdleCallback 方法優(yōu)化瀏覽器空閑時(shí)間。
• 支持通過 src 屬性直接實(shí)現(xiàn) LQIP。
• 支持延遲加載 CSS 背景。

Layzr.js

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

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

你可以在這里查看示例。

Blazy.js

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

使用 Element.getBoundingClientRect() 方法，與實(shí)現(xiàn) IntersectionObserver API 的其他庫相比，該方法可能無法執(zhí)行。但是由于這種方法，這個(gè)庫有超過 98% 的瀏覽器用戶支持。它還使用 Element.closest()。這個(gè) API 的瀏覽器支持率僅超過 94%。在這種情況下，您不必?fù)?dān)心遺漏的 6%，因?yàn)閹彀粋€(gè)用于不支持瀏覽器的 polyfill。

特點(diǎn)

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

你可以在這里查看示例。

Responsively Lazy

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

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

特點(diǎn)

• 支持響應(yīng)式圖片。
• 支持 webp。
• 對搜索引擎優(yōu)化（SEO）友好。
• 可用的自定義項(xiàng)不多。

你可以在這里查看示例。

LazyestLoad.js

LazyestLoad.js 是此列表中最小的庫之一。它只有 700 字節(jié)，壓縮后僅僅 639 字節(jié)。這個(gè)庫有兩個(gè)版本，lazyload 和 lazyestload。它們都有不同的用法，lazyload 版本的工作方式與普通庫類似，圖片將在其即將進(jìn)入視口時(shí)加載；但是 lazyestload 版本只在用戶停止?jié)L動且圖片在視口中或在 100 像素以內(nèi)時(shí)，才會加載圖片。這有助于減少網(wǎng)絡(luò)負(fù)荷，如果用戶只是滾動而不暫?？磮D片。

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

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

特點(diǎn)

• 簡單直截了當(dāng)。
• 不允許像其他庫一樣進(jìn)行大量自定義。
• 支持響應(yīng)式圖片。
• 文檔不夠詳細(xì)。

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

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

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

為了安全起見，您可能仍需要使用動態(tài)導(dǎo)入來實(shí)現(xiàn)其中一個(gè)庫。

了解你的目標(biāo)受眾

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

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

在另一個(gè)示例中，如果懶加載庫使用 getBoundingClientRect() 方法，它的性能將不如 IntersectionObserver API，因?yàn)楸娝苤嬖趶?qiáng)制布局回流問題。雖然犧牲了性能，但用戶覆蓋率將高于前者。希望我能把這一點(diǎn)說清楚。

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

可以通過了解目標(biāo)受眾及其瀏覽器使用情況來改進(jìn)這些方面。如果你知道你的目標(biāo)受眾和他們使用的瀏覽器，你可以確保你的延遲加載的實(shí)現(xiàn)更適合那些瀏覽器版本。這將減少對不受支持的瀏覽器包含 polyfill 的需要，因?yàn)橐呀?jīng)知道需要關(guān)注哪些瀏覽器。當(dāng)你有一個(gè)異常值（不支持的瀏覽器），圖片可以直接加載沒有任何延遲或延遲。如果你對受眾有很好的了解，那么這些異常值的數(shù)量將可以忽略不計(jì)。

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

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