遅延読み込みはどのように機能しますか？
通常のHTML画像は次のようになります。
<img src="sample.jpg" width="100%"/>遅延読み込みプラグインは、次のようにコードを書き直します。
<img data-src="sample.jpg" width="100%"/>お気づきのように、src属性がに変更されましたdata-src.
ないのでsrc、ブラウザは最初にこの画像をロードしません。後で、小さなJavaScriptコードが、画像がビューポート（ユーザーのビューポート）にあるかどうか、および画像がビューポート内にあるかどうかを確認します。data-srcそれに戻るsrc画像のダウンロードと表示をトリガーするブラウザ。
ネイティブの遅延読み込みとは何ですか？
Chromeには「ネイティブ遅延読み込み」が付属しています。あなたはそれについてここで読むことができます。
ネイティブの遅延読み込みには、JavaScriptが不要であり、ブラウザーが「ネイティブに」実行するため、通常ははるかに高速であるという利点があります。
コードは次のようになります。
<img src="sample.jpg" loading="lazy" width="100%"/>飛行画像とは何ですか？
Flying Imagesは、高性能の遅延読み込みプラグインです。可能な場合はブラウザの「ネイティブ」遅延読み込みを使用します。それ以外の場合は、遅延読み込みに通常のJavaScriptを使用します。
Flying Imagesは、画像がビューポートに表示される前に画像をロードすることもできます。
ユーザーエクスペリエンスを損なうため、遅延読み込みを恐れていますか？
飛行画像は他の遅延読み込みプラグインとどのように異なりますか？
- 組み込みの遅延読み込みを使用 -可能な場合は組み込みの遅延読み込みを使用します（現在はChromeでのみサポートされています）。それ以外の場合は、JavaScriptを使用して画像を遅延読み込みします。
- ビューポートに入る前に画像をロードする -他のプラグインは、ビューポートの「内部」にあるときに画像をロードしますが、フライングイメージは、ビューポートに入る直前に画像をロードします。
- 小さなJavaScript -わずか0.5KB、圧縮、縮小。
- 必要に応じて、ネイティブのみを使用できます – Chromeのみをサポートしたいですか？ JavaScriptを挿入しない「ネイティブのみ」に切り替えることができます。
- すべてのHTMLコードを書き換えます -遅延読み込みが原因で画像を見逃すことはありません（ギャラリープラグインによって追加された場合でも）。
- 透明フィラー -小さな透明なbase64がすべての画像に追加されます。画像の読み込み時にちらつきがなくなりました。
- キーワードを除外する -ほとんどすべての遅延読み込みプラグインは除外機能を提供しますが、フライング画像は画像の親ノードから画像を除外することもできます。画像にクラス名がない場合に便利です。
- IEとJavaScriptが無効になっているブラウザをサポートします --Internet Explorerの場合、またはJavaScriptが完全に無効になっている場合でも、すべての画像が即座に読み込まれます（
noscript鬼ごっこ）。
