9 つの JavaScript 画像遅延読み込みライブラリを共有しましょう

javascriptこのコラムでは、いくつかの画像遅延読み込みライブラリを紹介します。

関連する無料の学習に関する推奨事項: javascript (ビデオ)

画像の遅延読み込みが必要な理由

Web アプリケーションではパフォーマンスが非常に重要です。世界で最も美しく魅力的な Web サイトを作成することはできますが、それがブラウザーにすぐに読み込まれない場合、人々は Web サイトを無視する傾向があります。 Web サイトのパフォーマンスを本当に向上させるのは、非常に難しい場合があります。これは、高価な JavaScript、遅い Web フォント表示、かさばる画像リソースなど、Web 開発には多くのボトルネックがあるためです。

この記事では主に、Web サイトにおける画像リソースの影響に焦点を当てます。 Jecelyn の調査によると、Web ページは画像を読み込むだけで平均 5MB のデータを消費します。一部の国ではモバイルデータ通信料が非常に高価であるため、これはユーザーにとって大きな負担となる可能性があります。ユーザーは、特に接続が遅い場合、サイトの読み込みに時間がかかりすぎるという問題も経験します。これらはウェブサイトに悪影響を与える可能性があります。

Jakob Nielson の調査によると、留意すべき重要な統計がいくつかあります:

• Web サイトの読み込み時間が 100 ミリ秒未満である場合は、瞬間的なものとみなされます。
• 100 ～ 300 ミリ秒の遅延が認識されます。
• 消費者の 47% は、Web ページが 2 秒以内に読み込まれることを期待しています。
• 消費者の 40% は、読み込みに 3 秒以内で Web サイトを放棄します。

遅延読み込みとは何ですか?

パフォーマンスや品質に影響を与えることなく、Web サイトの画像リソースに効率的なサービスを提供できる戦略がいくつかあり、遅延読み込みもその 1 つです。遅延読み込みとは、必要なものだけを読み込み、残りは必要になるまで延期することを意味します。この戦略は、画像、ビデオ、テキスト、その他の種類のデータに適用できます。ただし、ほとんどの場合、画像アセットなどのかさばるコンテンツに適しています。

Web サイトに画像の遅延読み込みを実装するには、いくつかの方法があります。たとえば、Intersection Observer API を使用するか、イベント ハンドラーを使用して、要素がビュー内にあるかどうかを判断できます。強力な JavaScript ライブラリもいくつかあり、ニーズと互換性に応じて次の画像遅延読み込みライブラリ メソッドを使用できます。見てみましょう！

Lazy Sizes

Lazy Sizes は現在最高の遅延読み込みライブラリの 1 つで、Github 上に 14.1K 以上のコレクションがあり、圧縮後のサイズはわずか 3.4kB です。また、約 98.5% のブラウザ ユーザーをサポートしており、そのドキュメントは理解しやすい方法で書かれています。

機能

• レスポンシブ画像のサポートが含まれています。
• ユーザー エージェントの助けを借りて検索エンジンを検出し、すべての画像を即座にロードすることで SEO を最適化します。
• 効率的で実用的なコードに基づいています。
• ネットワーク接続がアイドル状態のときにリソースをプリロードします。
• LQIP のサポートが含まれます。
• IntersectionObserver、MutationObserver、getElementsByClassName などをサポートします。
• 機能を拡張するためのプラグインの使用をサポートします。
• 応答画像サイズの自動計算をサポートします。

ここで例を確認できます。

Lozad.js

Lozad.js は、画像、iframe、広告、ビデオ、その他の要素の遅延読み込みをサポートしています。 Github には約 6.4K のコレクションがあり、コミュニティで非常に人気があります。研究チームによると、このライブラリは、Tesla、Domino、Xiaomi、BBC など、いくつかのブランドの Web アプリケーションで使用されています。これは非常に小さく、gzip 圧縮されたのはわずか 1.1kB です。 IntersectionObserver API と MutationObserver API を使用するため、ブラウザ ユーザーの約 92% をサポートします。

機能

• 依存関係はありません。
• 動的に追加された要素の遅延読み込みをサポートします。
• 完全に JavaScript を使用します。
• LQIP と応答イメージのサポートが含まれます。
• getBoundingClientRect() を使用するライブラリよりも効率的です。
• ポリフィルはサポートされていないブラウザでも使用できます。

ここで例を確認できます。

Tuupola の Lazyload

Tuupola の Lazyload も、Github 上で人気のある画像遅延読み込みライブラリであり、約 8.4K のコレクションがあります。 IntersectionObserver API を使用しており、シンプルで使いやすいです。圧縮後のサイズはわずか 956 バイトであり、他のライブラリよりも小さくなります。これは、他のライブラリが互換性とパフォーマンスを向上させるために他の組み合わせを使用するのに対し、IntersectionObserver API のみを使用するという事実に起因すると考えられます。さらに、これのおかげで、現在ブラウザ ユーザーの 92% がサポートしています。

機能

• 利便性を高めるために、jQuery ラッパーが含まれています。
• LQIP と応答イメージのサポートが含まれます。
• コア IntersectionObserver API は、追加のパラメーターを渡すことで構成できます。

Vanilla Lazyload by Andrea Verlicchi

Vanilla Lazyload は、画像、ビデオ、および iframe を遅延読み込みするためのもう 1 つの純粋な JavaScript ライブラリです。 Github では非常に人気があり、1500 近くのリポジトリとパッケージが利用可能です。 NPM では年間 190 万件以上のダウンロードがあります。圧縮されたサイズはわずか 2.7kB です。他のライブラリと同様に、このライブラリは、ブラウザ ユーザーの 92% にサポートされている IntersectionObserver API を使用します。

• ライブラリは検索エンジンの画像をカバーしていないため、SEO に適しています。
• 接続が中断された後、ライブラリが自動的に画像を再ロードするため、不安定なネットワーク接続をサポートします。
• 画像がビューポートから出た場合は、画像の読み込みをキャンセルします。
• LQIP と応答イメージのサポートが含まれます。
• 完全に JavaScript を使用します。

#ここで例を確認できます。

Yall.js

Yall.js も IntersectionObserver API のみを使用して画像、ビデオ、iframe などを遅延読み込みする別の JavaScript ライブラリです。 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 です。

• 依存関係はありません。
• ブラウザの互換性と可用性に基づいて画像ソースをインテリジェントに選択します。
• 動的に追加された要素をサポートします。
• 明確かつ簡潔なドキュメントと例。
• threshold プロパティを持つビューポート調整画像は遅延読み込みされ、必要に応じて画像を先にまたは後で読み込むことができます。

ここで例を確認できます。

Blazy.js

Blazy.js は、画像、ビデオ、および

iframe を処理できるもう 1 つの軽量 JavaScript 遅延読み込みライブラリです。これは Github で非常に人気があり、2.6K のコレクションがあり、現在 860 以上のオープン ソース プロジェクト ライブラリで使用されています。圧縮されたサイズはわずか 1.9kB です。

Element.getBoundingClientRect() メソッドを使用します。このメソッドは、IntersectionObserver API を実装する他のライブラリほどパフォーマンスが高くない可能性があります。しかし、このアプローチのおかげで、このライブラリは 98% 以上のブラウザ ユーザーにサポートされています。 Element.closest() も使用します。この API に対するブラウザのサポート率は 94% をわずかに超えています。この場合、ライブラリにはサポートされていないブラウザ用の polyfill が含まれているため、不足している 6% について心配する必要はありません。

特徴

毎月何百万ものアクセスがある実際の Web サイトで使用されます。
• 依存関係はありません。
• レスポンシブ画像をサポートします。
• Layzr.js と同様に、オフセットを使用して要素を読み込むことができます。
• サンプルコードを含む明確なドキュメント。
• AMD、CommonJS、グローバルなどのモジュール形式をサポートします。
• 網膜画像を提供するのは非常に簡単です。

ここで例を確認できます。

Responsively Lazy

Responsively Lazy は、画像の遅延読み込みライブラリでもあります。内容は簡潔で、圧縮されたのはわずか 1.1kB です。構文の実装が優れているため、多くのライブラリより際立っています。上で説明したライブラリのほとんどでは、JavaScript を無効にしたり、src 属性を無視したりするブラウザに対して noscript タグを使用する必要があります。ただし、Lazy では従来の src 属性を使用し、サポートされているブラウザの srcset および src 属性を追加できます。これにより、このライブラリは検索エンジン最適化 (SEO) に適したものになります。このライブラリは Element.getBoundingClientRect() も使用するため、このライブラリでも強制レイアウト リフローが発生します。

さらに、このライブラリには Github 上に約 1.1K のコレクションがあり、ブラウザ ユーザーのほぼ 95% がこのライブラリをサポートしています。

機能

• レスポンシブ画像をサポートします。
• ウェブページをサポートします。
• 検索エンジン最適化 (SEO) に優しい。
• 利用できるカスタマイズはあまり多くありません。

ここで例を確認できます。

LazyestLoad.js

LazyestLoad.js は、このリストの中で最も小さいライブラリの 1 つです。わずか 700 バイトであり、圧縮するとわずか 639 バイトになります。このライブラリには、lazyload と lazyestload という 2 つのバージョンがあります。これらはすべて異なる用途を持ち、lazyload バージョンは通常のライブラリと同様に機能し、画像はビューポートに入ろうとするときにロードされますが、lazyestload バージョンはユーザーが停止したときにのみロードされます。スクロールと画像 画像は、ビューポート内または 100 ピクセル以内にある場合にのみロードされます。これにより、ユーザーが画像を見るために一時停止せずにスクロールするだけの場合、ネットワーク負荷が軽減されます。

これは主に Element.getBoundingClientRect() メソッドを使用しますが、これは他の実装に比べて効率的ではなく、レイアウトの再配置を引き起こすことが知られています。

ビデオや iframe を処理できる他のライブラリとは異なり、このライブラリは画像のみを処理します。 Github には 15,000 を超えるコレクションもあります。

特徴

• シンプルでわかりやすい。
• 他のライブラリのような広範なカスタマイズはできません。
• レスポンシブ画像をサポートします。
• ドキュメントの詳細が十分ではありません。

lazyload の例と、lazyestload の例を表示できます。

---

最新のブラウザのほとんどはネイティブの遅延読み込みをサポートしているため、ネイティブ実装を使用することをお勧めします。また、ネイティブの遅延読み込みにより、ブラウザーで JavaScript が無効になっている場合でも、画像が遅延して読み込まれます。 img タグの loading="lazy" 属性を使用するだけで、すべての手間が省けます。

最新のブラウザのほとんどはネイティブの遅延読み込みをサポートしており、Safari も間もなくこれをサポートします。現在、ブラウザのサポート率は 74% ですが、ブラウザがネイティブ実装をサポートしていない場合は、polyfill または上記の遅延読み込みライブラリのいずれかを使用できます。

安全のため、ライブラリの 1 つを実装するには動的インポートを使用する必要がある場合があります。

対象ユーザーを知る

上記のすべてのライブラリを注意深く分析すると、パフォーマンス、サイズ、ブラウザ互換性 (ユーザー カバレッジ) の 3 つの側面で激しく競合していることがわかります。これらは通常、他のレベルを向上させるために少なくとも 1 つを犠牲にする必要があります。

たとえば、IntersectionObserver API を実装するライブラリを使用すると、高パフォーマンスのライブラリが得られますが、そのユーザー対象範囲は狭くなります。パッチ適用が必要な場合は、polyfills などのフォールバック オプションが必要になります。これにより、ライブラリ全体のサイズが増加します。

別の例では、遅延読み込みライブラリが getBoundingClientRect() メソッドを使用する場合、IntersectionObserver API ほどのパフォーマンスは得られません。強制的なレイアウトのリフローの問題。パフォーマンスは犠牲になりますが、ユーザーカバレッジは前者よりも高くなります。これを明確にできれば幸いです。

互換性の問題を最小限に抑え、パフォーマンスを最大化するにはどうすればよいでしょうか?

これらの領域は、対象ユーザーとブラウザの使用状況を理解することで改善できます。対象ユーザーとそのユーザーが使用するブラウザーがわかっている場合は、遅延読み込みの実装がそれらのブラウザーのバージョンにより適していることを確認できます。これにより、どのブラウザを考慮する必要があるかがすでにわかっているため、サポートされていないブラウザに対して polyfill を含める必要性が減ります。外れ値 (サポートされていないブラウザー) がある場合、画像はラグや遅延なく直接読み込むことができます。視聴者をよく理解していれば、これらの異常値の数は無視できる程度になります。

このアプローチは、パフォーマンスが高く、ブラウザー例外を無視することでライブラリ サイズを最小限に抑え、ターゲット ユーザーのブラウザー バージョンをサポートする実装ライブラリを使用するのに役立ちます。

---

この記事では、JavaScript の遅延読み込みライブラリと、効率とユーザー エクスペリエンスを向上させるためのいくつかの方法について簡単に説明します。以下のコメント欄でご意見をお聞かせください。

読んでいただきありがとうございます。コーディングを楽しんでください! ！

以上が9 つの JavaScript 画像遅延読み込みライブラリを共有しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。