Lassen Sie mich neun JavaScript-Bild-Lazy-Loading-Bibliotheken mit Ihnen teilen

In der Kolumne

Javascript werden mehrere Bild-Lazy-Loading-Bibliotheken vorgestellt.

Verwandte kostenlose Lernempfehlungen: Javascript (Video)

Warum Lazy Loading von Bildern

Leistung ist in Webanwendungen von entscheidender Bedeutung. Sie können die schönste und attraktivste Website der Welt haben, aber wenn sie im Browser nicht schnell lädt, neigen die Leute dazu, sie zu überspringen. Es kann ziemlich schwierig sein, die Leistung Ihrer Website wirklich gut zu machen. Dies liegt daran, dass es bei der Webentwicklung viele Engpässe gibt, wie z. B. teures JavaScript, langsame Anzeige von Web-Schriftarten, umfangreiche Bildressourcen usw.

In diesem Artikel konzentrieren wir uns hauptsächlich auf die Wirkung von Bildressourcen auf der Website. Laut einer Studie von Jecelyn verbraucht eine Webseite durchschnittlich 5 MB Daten, allein um Bilder zu laden. Dies kann für Nutzer eine große Belastung darstellen, da mobile Daten in manchen Ländern sehr teuer sind. Benutzer haben auch Probleme damit, dass das Laden von Websites zu lange dauert, insbesondere bei langsamen Verbindungen. Diese können sich negativ auf Ihre Website auswirken.

Laut einer Studie von Jakob Nielson sind hier einige wichtige Statistiken, die Sie im Hinterkopf behalten sollten:

• Website-Ladezeiten unter 100 Millisekunden gelten als augenblicklich.
• Latenz zwischen 100 und 300 Millisekunden ist spürbar.
• 47 % der Verbraucher erwarten, dass Webseiten in höchstens zwei Sekunden geladen werden.
• 40 % der Verbraucher warten nicht länger als 3 Sekunden mit dem Laden, bevor sie eine Website verlassen.

Was ist Lazy Loading? Es gibt mehrere Strategien, die effiziente Dienste für die Bildressourcen der Website bereitstellen können, ohne die Leistung und Qualität zu beeinträchtigen, und Lazy Loading ist eine davon. Lazy Loading bedeutet, nur das zu laden, was benötigt wird, und den Rest aufzuschieben, bis er benötigt wird. Diese Strategie kann auf Bilder, Videos, Text und andere Datentypen angewendet werden. Meistens eignet es sich jedoch für umfangreiche Inhalte wie Bildressourcen.

Es gibt mehrere Möglichkeiten, das verzögerte Laden von Bildern auf Ihrer Website zu implementieren. Sie können beispielsweise die Intersection Observer API verwenden oder einen Ereignishandler verwenden, um festzustellen, ob ein Element angezeigt wird. Es gibt auch mehrere leistungsstarke JavaScript-Bibliotheken. Sie können die folgenden Methoden zum verzögerten Laden von Bildern entsprechend Ihren Anforderungen und Ihrer Kompatibilität verwenden. Werfen wir einen Blick darauf!

Lazy Sizes

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，比其他的库都小。这可以归功于它只使用了 IntersectionObserverLazy Sizes ist derzeit eine der besten Lazy-Loading-Bibliotheken, mit mehr als 14,1 KB Sammlungen auf Github und nur 3,4 KB nach der Komprimierung. Es unterstützt außerdem etwa 98,5 % der Browserbenutzer und auch die Dokumentation ist leicht verständlich geschrieben.

Funktionen

🎜🎜Beinhaltet Unterstützung für responsive Bilder. 🎜🎜Optimieren Sie SEO, indem Sie mithilfe des Benutzeragenten Suchmaschinen erkennen und alle Bilder sofort laden. 🎜🎜Basierend auf effizientem und praktischem Code. 🎜🎜 Laden Sie Ressourcen vor, wenn die Netzwerkverbindung inaktiv ist. 🎜🎜Enthält Unterstützung für LQIPs. 🎜🎜Unterstützt IntersectionObserver, MutationObserver und getElementsByClassName usw. 🎜🎜Unterstützt die Verwendung von Plug-Ins zur Erweiterung von Funktionen. 🎜🎜Unterstützt die automatische Berechnung der responsiven Bildgröße. 🎜🎜🎜Beispiele könnt ihr hier sehen. 🎜🎜🎜

Lozad.js🎜🎜Lozad.js unterstützt das verzögerte Laden von Bildern, iframe, Anzeigen, Videos und anderen Elementen . Es verfügt über fast 6,4.000 Sammlungen auf Github und ist in der Community sehr beliebt. Nach Angaben des Forschungsteams wird diese Bibliothek von Webanwendungen mehrerer Marken genutzt, darunter Tesla, Domino, Xiaomi und die BBC. Es ist sehr klein, nur 1,1 KB groß. Da es die API IntersectionObserver und die API MutationObserver verwendet, unterstützt es etwa 92 % der Browserbenutzer. 🎜

Funktionen

🎜🎜Es gibt keine Abhängigkeiten. 🎜🎜Unterstützt das verzögerte Laden dynamisch hinzugefügter Elemente. 🎜🎜Komplett mit JavaScript. 🎜🎜Enthält Unterstützung für LQIPs und responsive Bilder. 🎜🎜Effizienter als Bibliotheken, die getBoundingClientRect() verwenden. 🎜🎜Polyfills können in nicht unterstützten Browsern verwendet werden. 🎜🎜🎜Beispiele könnt ihr hier sehen. 🎜🎜🎜

Tuupola's Lazyload🎜🎜Tuupola's Lazyload ist eine weitere beliebte Lazy-Loading-Bibliothek für Bilder auf Github mit fast 8,4.000 Sammlungen. Es verwendet die API IntersectionObserver und ist einfach zu verwenden. Nach der Komprimierung sind es nur 956 Byte, was kleiner ist als bei anderen Bibliotheken. Dies kann auf die Tatsache zurückgeführt werden, dass nur die API IntersectionObserver verwendet wird, da andere Bibliotheken aus Gründen der besseren Kompatibilität und Leistung andere Kombinationen verwenden. Darüber hinaus unterstützen es derzeit 92 % der Browserbenutzer. 🎜

Funktionen

• Der Einfachheit halber ist ein jQuery-Wrapper enthalten.
• Beinhaltet Unterstützung für LQIPs und responsive Bilder.
• Die Kern-API IntersectionObserver kann durch Übergabe zusätzlicher Parameter konfiguriert werden. 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

Vanilla Lazyload von Andrea Verlicchi

Vanilla Lazy Load ist eine weitere reine JavaScript-Bibliothek zum verzögerten Laden von Bildern, Videos und Iframes. Es ist auf Github sehr beliebt, mit fast 1500 verfügbaren Repositories und Paketen. Es gibt über 1,9 Millionen Downloads pro Jahr auf NPM. Es ist nur 2,7 KB komprimiert. Wie andere Bibliotheken verwendet diese Bibliothek die API IntersectionObserver, die von 92 % der Browserbenutzer unterstützt wird.

• SEO-freundlich, da die Bibliothek keine Bilder von Suchmaschinen abdeckt.
• Unterstützt instabile Netzwerkverbindungen, da die Bibliothek Bilder automatisch neu lädt, nachdem die Verbindung unterbrochen wurde.
• Brechen Sie das Laden des Bildes ab, wenn es das Ansichtsfenster verlässt.
• Enthält Unterstützung für LQIPs und responsive Bilder.
• Komplett mit JavaScript.
• 
• Ein Beispiel können Sie hier sehen.

Yall.js

Yall.js ist eine weitere JavaScript-Bibliothek, die ebenfalls nur die IntersectionObserver-API zum verzögerten Laden von Bildern, Videos usw. verwendet code>iframe und CSS-Hintergrundbilder. Diese Bibliothek verfügt über etwa 1,1.000 Sammlungen und wird von 91 Benutzern in ihren Projektbibliotheken verwendet. Diese Bibliothek kann auf 1 KB komprimiert werden. Wie wir bei früheren Bibliotheken gesehen haben, unterstützt Yall.js aufgrund der Verwendung der IntersectionObserver-API auch 92 % der Browserbenutzer. Es ist wichtig zu beachten, dass keine Sicherung erfolgt, wenn der Browser die API IntersectionObserver nicht unterstützt. In diesem Fall müssen Sie polyfill verwenden.

Funktionen

Unterstützen Sie die Erkennung dynamisch geladener Elemente mit Hilfe der MutationObserver-API. 🎜🎜Verwenden Sie die Methode requestIdleCallback, um die Leerlaufzeit des Browsers zu optimieren. 🎜🎜Unterstützen Sie LQIP direkt über das Attribut src. 🎜🎜Unterstützt verzögertes Laden des CSS-Hintergrunds. 🎜🎜

Layzr.js

🎜Layzr.js ist eine leichte, auf JavaScript basierende Lazy-Loading-Bibliothek für Bilder. Es verwendet hauptsächlich Element.classList, mit wenigen ES5-Array-Methoden und requestAnimationFrame-Methoden. Dank dieser APIs unterstützen mehr als 97 % der Browserbenutzer diese Bibliothek. Layzr.js hat über 5,6.000 Sammlungen auf Github und ist so beliebt, dass es im komprimierten Zustand nur 1 KB wiegt. 🎜🎜🎜Es gibt keine Abhängigkeiten. 🎜🎜Intelligente Auswahl von Bildquellen basierend auf Browserkompatibilität und Verfügbarkeit. 🎜🎜Unterstützt dynamisch hinzugefügte Elemente. 🎜🎜Klare und prägnante Dokumentation und Beispiele. 🎜🎜Bilder zur Ansichtsfensteranpassung mit dem Attribut Schwellenwert werden verzögert geladen, Bilder können je nach Bedarf früher oder später geladen werden. 🎜🎜🎜Beispiele könnt ihr hier sehen. 🎜🎜🎜

Blazy.js

🎜Blazy.js ist eine weitere leichte JavaScript-Lazy-Loading-Bibliothek, die Bilder, Videos und iframe verarbeiten kann . Es ist auf Github mit 2,6K-Sammlungen sehr beliebt und wird derzeit von über 860 Open-Source-Projektbibliotheken verwendet. Es ist nur 1,9 KB komprimiert. 🎜🎜Verwendung der Methode Element.getBoundingClientRect(), die im Vergleich zu anderen Bibliotheken, die die API IntersectionObserver implementieren, möglicherweise keine gute Leistung erbringt. Aufgrund dieses Ansatzes wird diese Bibliothek jedoch von mehr als 98 % der Browserbenutzer unterstützt. Es verwendet auch Element.closest(). Die Browserunterstützung für diese API beträgt knapp über 94 %. In diesem Fall müssen Sie sich über die fehlenden 6 % keine Sorgen machen, da die Bibliothek ein polyfill für nicht unterstützte Browser enthält. 🎜🎜Funktionen🎜🎜🎜 Wird auf echten Websites mit Millionen von monatlichen Besuchen verwendet. 🎜🎜Keine Abhängigkeiten. 🎜🎜Unterstützen Sie reaktionsfähige Bilder. 🎜🎜 Ähnlich wie Layzr.js ermöglicht es das Laden von Elementen mit Offsets. 🎜🎜Klare Dokumentation mit Beispielcode. 🎜🎜Unterstützt Modulformate wie AMD, CommonJS und Globals. 🎜🎜Sehr einfach, Netzhautbilder bereitzustellen. 🎜🎜🎜Beispiele könnt ihr hier sehen. 🎜🎜🎜🎜

Responsively Lazy

Responsively Lazy ist auch eine Lazy-Loading-Bibliothek für Bilder. Der Inhalt ist prägnant und nur 1,1 KB komprimiert. Aufgrund seiner guten Syntaxumsetzung hebt es sich von vielen Bibliotheken ab. Die meisten der oben besprochenen Bibliotheken erfordern die Verwendung des noscript-Tags für Browser mit deaktiviertem Javascript, das Ignorieren des src-Attributs usw. Aber Lazy kann das traditionelle Attribut src verwenden und die Attribute srcset und src für unterstützte Browser hinzufügen. Dies macht diese Bibliothek suchmaschinenoptimiert (SEO). Diese Bibliothek verwendet auch Element.getBoundingClientRect(), sodass in dieser Bibliothek auch erzwungene Layout-Reflows auftreten. 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

Darüber hinaus verfügt diese Bibliothek über fast 1,1.000 Sammlungen auf Github und fast 95 % der Browserbenutzer unterstützen diese Bibliothek.

Funktionen

• Unterstützt responsive Bilder.
• Webp unterstützen.
• Suchmaschinenoptimierung (SEO) freundlich.
• Es sind nicht viele Anpassungen verfügbar.

Ein Beispiel können Sie hier sehen.

---

LazyestLoad.js

LazyestLoad.js ist eine der kleinsten Bibliotheken auf dieser Liste. Es sind nur 700 Bytes, komprimiert auf nur 639 Bytes. Es gibt zwei Versionen dieser Bibliothek: lazyload und lazyestload. Sie haben alle unterschiedliche Verwendungszwecke. Die lazyload-Version funktioniert wie die normale Bibliothek. Das Bild wird geladen, wenn es in das Ansichtsfenster gelangt. Die lazyestload-Version wird jedoch nur dann geladen Der Benutzer hört auf zu scrollen. Das Bild wird nur geladen, wenn es sich im Ansichtsfenster befindet oder innerhalb von 100 Pixeln liegt. Dies trägt dazu bei, die Netzwerklast zu reduzieren, wenn der Benutzer nur scrollt, ohne eine Pause einzulegen, um das Bild anzusehen. 🎜🎜Es wird hauptsächlich die Methode Element.getBoundingClientRect() verwendet, die im Vergleich zu anderen Implementierungen nicht effizient ist und bekanntermaßen auch Layout-Reflows auslöst. 🎜🎜Diese Bibliothek verarbeitet nur Bilder, im Gegensatz zu anderen Bibliotheken, die Videos und iframe verarbeiten können. Außerdem gibt es über 15.000 Sammlungen auf Github. 🎜

Funktionen

• Einfach und unkompliziert.
• Ermöglicht keine umfassende Anpassung wie andere Bibliotheken.
• Unterstützen Sie reaktionsfähige Bilder.
• Die Dokumentation ist nicht detailliert genug.

🎜Sie können sich das Lazyload-Beispiel und das Lazyestload-Beispiel ansehen. 🎜🎜🎜Da die meisten modernen Browser natives Lazy Loading unterstützen, wird empfohlen, native Implementierungen zu verwenden. Native Lazy Loading sorgt außerdem dafür, dass Bilder auch dann verzögert geladen werden, wenn JavaScript im Browser deaktiviert ist. Verwenden Sie einfach das Attribut loading="lazy" im Tag img und ersparen Sie sich die ganze Mühe. 🎜🎜Die meisten modernen Browser unterstützen natives Lazy Loading, und Safari wird bald auch unterstützt. Derzeit liegt die Browser-Unterstützungsrate bei 74 %. Wenn der Browser die native Implementierung nicht unterstützt, können Sie Polyfill oder eine der oben genannten Lazy-Loading-Bibliotheken verwenden. 🎜🎜Um auf der sicheren Seite zu sein, müssen Sie möglicherweise dennoch dynamische Importe verwenden, um eine dieser Bibliotheken zu implementieren. 🎜

Kennen Sie Ihre Zielgruppe🎜🎜Wenn Sie alle oben genannten Bibliotheken sorgfältig analysieren, werden Sie feststellen, dass sie in drei Aspekten stark konkurrieren: Leistung, Größe und Browserkompatibilität (Benutzerabdeckung). . Diese müssen in der Regel mindestens eines opfern, um das Niveau des anderen zu verbessern. 🎜🎜Wenn Sie beispielsweise eine Bibliothek verwenden, die die API IntersectionObserver implementiert, erhalten Sie eine Hochleistungsbibliothek, deren Benutzerabdeckung jedoch geringer ist. Wenn ein Patch erforderlich ist, muss eine Fallback-Option vorhanden sein, z. B. polyfills, die die Gesamtgröße der Bibliothek erhöht. 🎜🎜In einem anderen Beispiel: Wenn eine Lazy-Loading-Bibliothek die Methode getBoundingClientRect() verwendet, wird sie nicht so gut funktionieren wie die API IntersectionObserver, wie sie bekanntermaßen erzwungen hat Probleme beim Layout-Reflow. Obwohl die Leistung geopfert wird, ist die Benutzerabdeckung höher als bei ersterem. Ich hoffe, ich kann das klarstellen. 🎜🎜Wie können Kompatibilitätsprobleme minimiert und die Leistung maximiert werden? 🎜🎜Diese Aspekte können verbessert werden, indem Sie Ihre Zielgruppe und deren Browsernutzung verstehen. Wenn Sie Ihre Zielgruppe und die von ihr verwendeten Browser kennen, können Sie sicherstellen, dass Ihre Implementierung von Lazy Loading besser für diese Browserversionen geeignet ist. Dadurch wird die Notwendigkeit verringert, polyfill für nicht unterstützte Browser einzuschließen, da bereits bekannt ist, welche Browser Aufmerksamkeit erfordern. Wenn Sie einen Ausreißer (nicht unterstützten Browser) haben, können Bilder ohne Verzögerung oder Verzögerung direkt geladen werden. Wenn Sie Ihre Zielgruppe gut verstehen, wird die Anzahl dieser Ausreißer vernachlässigbar sein. 🎜🎜Dieser Ansatz hilft dabei, eine leistungsstarke Implementierungsbibliothek zu verwenden, die Bibliotheksgröße durch Ignorieren von Browserausnahmen auf ein Minimum zu beschränken und die Browserversion des Zielbenutzers zu unterstützen. 🎜🎜🎜In diesem Artikel werden kurz die Lazy-Loading-Bibliothek von JavaScript und einige Methoden zur Verbesserung der Effizienz und Benutzererfahrung erläutert. Sagen Sie Ihre Meinung in den Kommentaren unten. 🎜🎜Danke fürs Lesen und viel Spaß beim Codieren! ! 🎜

Das obige ist der detaillierte Inhalt vonLassen Sie mich neun JavaScript-Bild-Lazy-Loading-Bibliotheken mit Ihnen teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!