9개의 JavaScript 이미지 지연 로딩 라이브러리를 공유하겠습니다.-JS 튜토리얼-php.cn

javascript 칼럼에서는 여러 이미지 지연 로딩 라이브러리를 소개합니다.

9개의 JavaScript 이미지 지연 로딩 라이브러리를 공유하겠습니다.

관련 무료 학습 권장사항: javascript(동영상)

이미지의 지연 로딩이 필요한 이유

웹 애플리케이션에서는 성능이 매우 중요합니다. 세상에서 가장 아름답고 매력적인 웹사이트를 가질 수 있지만, 브라우저에서 빠르게 로드되지 않으면 사람들은 그 웹사이트를 건너뛰는 경향이 있습니다. 귀하의 웹사이트가 제대로 작동하도록 만드는 것은 꽤 까다로울 수 있습니다. 왜냐하면 웹 개발에는 값비싼 자바스크립트, 느린 웹 폰트 표시, 부피가 큰 이미지 리소스 등 병목 현상이 많기 때문입니다.

이 글에서는 주로 이미지 리소스가 웹사이트에 미치는 영향에 초점을 맞췄습니다. Jecelyn 연구에 따르면 웹페이지는 이미지를 로드하는 데에만 평균 5MB의 데이터를 소비합니다. 일부 국가에서는 모바일 데이터 요금이 매우 비싸기 때문에 이는 사용자에게 큰 부담이 될 수 있습니다. 또한 사용자는 특히 느린 연결에서 사이트를 로드하는 데 너무 오랜 시간이 걸리는 문제를 경험합니다. 이는 귀하의 웹사이트에 부정적인 영향을 미칠 수 있습니다.

Jakob Nielson 연구에 따르면 명심해야 할 몇 가지 중요한 통계는 다음과 같습니다.

웹사이트 로드 시간이 100밀리초 미만인 것은 즉각적인 것으로 간주됩니다.
100~300밀리초 사이의 지연 시간이 감지될 수 있습니다.
47%의 소비자는 웹페이지가 2초 이내에 로드되기를 기대합니다.
40%의 소비자는 웹 사이트를 떠나기 전에 로드하는 데 3초도 걸리지 않습니다.

레이지 로딩이란

성능이나 품질에 영향을 주지 않으면서 웹사이트의 이미지 리소스에 대해 효율적인 서비스를 제공할 수 있는 전략에는 여러 가지가 있는데, 레이지 로딩도 그 중 하나입니다. 지연 로딩이란 필요한 것만 로드하고 나머지는 필요할 때까지 연기하는 것을 의미합니다. 이 전략은 이미지, 비디오, 텍스트 및 기타 유형의 데이터에 적용될 수 있습니다. 그러나 대부분 이미지 자산과 같은 대용량 콘텐츠에 적합합니다.

웹사이트에서 이미지 지연 로딩을 구현하는 방법에는 여러 가지가 있습니다. 예를 들어 Intersection Observer API를 사용하거나 이벤트 핸들러를 사용하여 요소가 보기에 있는지 확인할 수 있습니다. 또한 필요와 호환성에 따라 다음과 같은 이미지 지연 로딩 라이브러리 방법을 사용할 수 있는 몇 가지 강력한 JavaScript 라이브러리가 있습니다. 살펴보자! 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

Lazy Sizes🎜Lazy Sizes는 현재 Github에 14.1K개 이상의 컬렉션이 있고 압축 후 크기가 3.4kB에 불과한 최고의 지연 로딩 라이브러리 중 하나입니다. 또한 브라우저 사용자의 약 98.5%를 지원하며 설명서도 이해하기 쉽게 작성되었습니다. 🎜

기능

🎜🎜반응형 이미지 지원이 포함되어 있습니다. 🎜🎜사용자 에이전트의 도움으로 검색 엔진을 감지하고 모든 이미지를 즉시 로드하여 SEO를 최적화하세요. 🎜🎜효율적이고 실용적인 코드를 기반으로 합니다. 🎜🎜 네트워크 연결이 유휴 상태일 때 리소스를 미리 로드하세요. 🎜🎜LQIP에 대한 지원이 포함되어 있습니다. 🎜🎜 IntersectionObserver, MutationObserver 및 getElementsByClassName 등을 지원합니다. 🎜🎜기능 확장을 위한 플러그인 사용을 지원합니다. 🎜🎜반응형 이미지 크기의 자동 계산을 지원합니다. 🎜🎜🎜여기에서 예시를 볼 수 있습니다. 🎜🎜

🎜

Lozad.js🎜🎜Lozad.js는 이미지, `iframe`, 광고, 비디오 및 기타 요소의 지연 로딩을 지원합니다. . Github에는 거의 6.4K 컬렉션이 있으며 커뮤니티에서 매우 인기가 있습니다. 연구팀에 따르면 이 라이브러리는 Tesla, Domino, Xiaomi 및 BBC를 포함한 여러 브랜드의 웹 애플리케이션에서 사용됩니다. 매우 작습니다. gzip으로 압축된 크기는 1.1kB에 불과합니다. `IntersectionObserver` API와 `MutationObserver` API를 사용하기 때문에 약 92%의 브라우저 사용자를 지원합니다. 🎜

기능

🎜🎜종속성이 없습니다. 🎜🎜동적으로 추가된 요소의 지연 로딩을 지원합니다. 🎜🎜JavaScript를 완전히 사용합니다. 🎜🎜LQIP 및 반응형 이미지에 대한 지원이 포함되어 있습니다. 🎜🎜getBoundingClientRect()를 사용하는 라이브러리보다 더 효율적입니다. 🎜🎜폴리필은 지원되지 않는 브라우저에서 사용할 수 있습니다. 🎜🎜🎜여기에서 예시를 볼 수 있습니다. 🎜🎜

🎜

Tuupola의 Lazyload🎜🎜Tuupola의 Lazyload는 거의 8.4K 컬렉션을 포함하는 Github의 또 다른 인기 있는 이미지 지연 로딩 라이브러리입니다. `IntersectionObserver` API를 사용하며 사용이 쉽습니다. 압축 후 크기는 956바이트에 불과해 다른 라이브러리에 비해 작습니다. 이는 다른 라이브러리가 더 나은 호환성과 성능을 위해 다른 조합을 사용하기 때문에 `IntersectionObserver` API만 사용한다는 사실 때문일 수 있습니다. 게다가 그 덕분에 현재 브라우저 사용자의 92%가 이를 지원하고 있습니다. 🎜

Features

편의를 위해 jQuery 래퍼가 포함되어 있습니다.
LQIP 및 반응형 이미지에 대한 지원이 포함됩니다.
추가 매개변수를 전달하여 핵심 IntersectionObserver API를 구성할 수 있습니다. 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 - Andrea Verlicchi

Vanilla 지연 로드는 이미지, 비디오 및 iframe의 지연 로딩을 위한 또 다른 순수 JavaScript 라이브러리입니다. 거의 1500개의 리포지토리와 패키지를 사용할 수 있어 Github에서 매우 인기가 높습니다. NPM에서는 연간 190만 건 이상의 다운로드가 이루어졌습니다. 압축된 용량은 2.7kB에 불과합니다. 다른 라이브러리와 마찬가지로 이 라이브러리는 브라우저 사용자의 92%가 지원하는 `IntersectionObserver` API를 사용합니다.

라이브러리는 검색 엔진의 이미지를 다루지 않으므로 SEO 친화적입니다.
연결이 중단된 후 라이브러리가 자동으로 이미지를 다시 로드하므로 불안정한 네트워크 연결을 지원합니다.
이미지가 뷰포트를 벗어나면 이미지 로드를 취소하세요.
LQIP 및 반응형 이미지에 대한 지원이 포함되어 있습니다.
JavaScript를 완전히 사용합니다.
여기에서 예를 볼 수 있습니다.

Yall.js

Yall.js는 IntersectionObserver API만 사용하여 이미지, 비디오, iframe 및 CSS 배경 이미지. 이 라이브러리에는 약 1.1K개의 컬렉션이 있으며 91명의 사용자가 프로젝트 라이브러리에서 사용하고 있습니다. 이 라이브러리는 1kB로 압축될 수 있습니다. 이전 라이브러리에서 본 것처럼 Yall.js는 IntersectionObserver API 사용으로 인해 브라우저 사용자의 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는 이미지, 비디오 및 iframe을 처리할 수 있는 또 다른 경량 JavaScript 지연 로딩 라이브러리입니다. . 2.6K 컬렉션으로 Github에서 매우 인기가 높으며 현재 860개 이상의 오픈 소스 프로젝트 라이브러리에서 사용됩니다. 압축률은 1.9kB에 불과합니다. 🎜🎜IntersectionObserver API를 구현하는 다른 라이브러리에 비해 성능이 좋지 않을 수 있는 Element.getBoundingClientRect() 메서드를 사용합니다. 그러나 이러한 접근 방식으로 인해 이 라이브러리는 98% 이상의 브라우저 사용자가 지원합니다. Element.closest()도 사용합니다. 이 API에 대한 브라우저 지원은 94%가 조금 넘습니다. 이 경우 라이브러리에는 지원되지 않는 브라우저에 대한 폴리필이 포함되어 있으므로 누락된 6%에 대해 걱정할 필요가 없습니다. 🎜🎜Features🎜🎜🎜 월간 방문 횟수가 수백만 건에 달하는 실제 웹사이트에서 사용됩니다. 🎜🎜종속성 없음. 🎜🎜반응형 이미지를 지원합니다. 🎜🎜 Layzr.js와 유사하게 오프셋이 있는 요소를 로드할 수 있습니다. 🎜🎜예제 코드가 포함된 문서를 삭제하세요. 🎜🎜AMD, CommonJS 및 전역과 같은 모듈 형식을 지원합니다. 🎜🎜망막 사진 제공이 매우 쉽습니다. 🎜🎜🎜여기에서 예시를 볼 수 있습니다. 🎜🎜🎜🎜

Responsively Lazy

Responsively Lazy는 이미지용 지연 로딩 라이브러리이기도 합니다. 내용은 간결하며 압축률은 1.1kB에 불과합니다. 좋은 구문 구현으로 인해 많은 라이브러리 중에서 눈에 띕니다. 위에서 논의한 대부분의 라이브러리에서는 javascript를 비활성화하고 src 속성을 무시하는 등의 브라우저에 대해 noscript 태그를 사용해야 합니다. 그러나 게으른 사용자는 기존 src 속성을 사용하고 지원되는 브라우저에 srcset 및 src 속성을 추가할 수 있습니다. 이는 이 라이브러리를 검색 엔진 최적화(SEO) 친화적으로 만듭니다. 이 라이브러리는 Element.getBoundingClientRect()도 사용하므로 강제 레이아웃 리플로우도 이 라이브러리에서 발생합니다. 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

또한 이 라이브러리는 Github에 거의 1.1K 컬렉션을 보유하고 있으며 거의 95%의 브라우저 사용자가 이 라이브러리를 지원합니다.

기능

반응형 이미지를 지원합니다.
webp를 지원합니다.
검색 엔진 최적화(SEO) 친화적입니다.
맞춤설정이 많지 않습니다.

여기에서 예를 볼 수 있습니다.

LazyestLoad.js

LazyestLoad.js는 이 목록에서 가장 작은 라이브러리 중 하나입니다. 700바이트에 불과하고 639바이트로 압축되었습니다. 이 라이브러리에는 lazyload와 lazyestload의 두 가지 버전이 있습니다. 그것들은 모두 용도가 다릅니다. lazyload 버전은 일반 라이브러리처럼 작동하며 이미지는 뷰포트에 들어가려고 할 때 로드되지만 lazyestload 버전은 다음 경우에만 로드됩니다. 사용자가 스크롤을 중지합니다. 이미지가 뷰포트에 있거나 100픽셀 내에 있는 경우에만 이미지가 로드됩니다. 이는 사용자가 이미지를 보기 위해 멈추지 않고 스크롤만 하는 경우 네트워크 부하를 줄이는 데 도움이 됩니다. 🎜🎜주로 Element.getBoundingClientRect() 메서드를 사용하는데, 이는 다른 구현에 비해 효율적이지 않으며 레이아웃 리플로우를 트리거하는 것으로도 알려져 있습니다. 🎜🎜동영상과 iframe을 처리할 수 있는 다른 라이브러리와 달리 이 라이브러리는 이미지만 처리합니다. 또한 Github에는 15,000개 이상의 컬렉션이 있습니다. 🎜

기능

간단하고 간단합니다.
다른 라이브러리처럼 광범위한 사용자 정의를 허용하지 않습니다.
반응형 이미지를 지원합니다.
문서가 충분히 자세하지 않습니다.

🎜lazyload 예제와lazestload 예제를 볼 수 있습니다. 🎜🎜🎜대부분의 최신 브라우저는 기본 지연 로딩을 지원하므로 기본 구현을 사용하는 것이 좋습니다. 또한 기본 지연 로딩은 브라우저에서 JavaScript가 비활성화된 경우에도 이미지가 느리게 로드되도록 보장합니다. img 태그의 loading="lazy" 속성을 사용하면 모든 문제를 해결할 수 있습니다. 🎜🎜대부분의 최신 브라우저는 기본 지연 로딩을 지원하며 Safari도 곧 지원될 예정입니다. 현재 브라우저 지원률은 74%입니다. 브라우저가 기본 구현을 지원하지 않으면 폴리필이나 위의 지연 로딩 라이브러리 중 하나를 사용할 수 있습니다. 🎜🎜안전을 유지하려면 동적 가져오기를 사용하여 이러한 라이브러리 중 하나를 구현해야 할 수도 있습니다. 🎜