ブラウザIMG画像ネイティブ遅延読み込みLoading =” lazy”実践ガイド

1. Chrome76の遅延読み込みはそれをサポートします

今年の初めに、ChromeブラウザのIMGイメージとIFRAMEフレームワークがネイティブの遅延読み込み機能をサポートし、loading="lazy"構文を使用すると聞きました。

星と月を願って、最後に、互換性テーブルのグリッドは緑です、緑は本当に良いです、Chrome76はそれをサポートしています！

画像のネイティブ遅延読み込みの互換性

私は私のブラウザを見てみました、へぇ、それは最新バージョンにアップグレードされました、互換性は十分です、あなたは遊ぶことができます：

私のChromeブラウザバージョン

2.遅延読み込み特性に関する研究

ブラウザウィンドウの近くにあるときに画像をロードする場合は、次のコードで実行できます。

<img src = "./ example.jpg" Loading = "lazy" alt = "zhangxinxu">

遅延読み込み機能は、他のJavaScriptコードなしで実現できます。

見ることは信じています、あなたはここをクリックすることができます：画像ネイティブ遅延読み込みデモ

デモページには、180 * 180の垂直表示画像が30枚あります。

コンソールを開いてページを更新すると、17枚の画像が読み込まれ、残りの13枚は読み込まれていないことがわかります。

17個のリソースがロードされました

私は実際に17枚の写真をロードしましたが、これは私の見積もりをはるかに超えています！

デモページの現在のレイアウトによると、1画面に表示できる画像は4枚だけなので、一度に17枚の画像が読み込まれますが、画面の高さが4以内の画像素材が読み込まれるのでしょうか。

そこで、ページの画面表示の高さを低くして更新しました。結果は次のとおりです。

13枚の画像素材を読み込んだ

ロードされたマテリアルの数は確かにスクリーンの利用可能な高さに関係していることがわかりますが、スクリーンの高さの比率に基づいて計算されていません。混乱しています。方法はありません。仕様書を参照してください。可能な読み込みの詳細は、ブラウザの製造元によって決定されます。

したがって、最初の結論を引き出すことができます。

1.遅延読み込みは画面の高さに関係します。高さが小さいほど、読み込みの数は少なくなりますが、線形関係ではありません。

質問：それはインターネットの速度に関係していますか？

空白なしでスクロールバーをすばやくスクロールするときのエクスペリエンスを向上させるために、ネットワーク速度に関連していますか？

また、インターネットの速度が遅いことをテストしたところ、関連していることがわかりました。

インターネットの速度が遅い環境では、読み込まれる画像の数が多くなります。エラーを回避するために、比較テストを繰り返し、次の結論を確認しました。

2.遅延読み込みの負荷の数はネットワーク速度に関連しています。ネットワーク速度が遅いほど負荷の数は多くなりますが、線形関係ではありません。

たとえば、デフォルトの状態では、ロードされるイメージの数は16で安定していますが、Fast 3Gの場合、ロードされるイメージの数は21で安定しています。

21画像リソースの読み込み

Slow 3Gの場合、負荷の数は29で安定しています。

遅い3Gは29の画像リソースをロードします

ユーザーの動作と負荷テスト

画面をスクロールすると、アンロードされた画像は、待機やバッファリングなしで、位置に応じて順番にロードされ始めました。

スクロール後に読み込まれたマテリアル

したがって、結論を導き出すことができます。

3.スクロールすると、画像の遅延読み込みがトリガーされ、1画面をスクロールした後に読み込まれるとは言われません。

さらに、テスト中に別の現象が見つかりました。

4.ウィンドウのサイズ変更を変更すると、画面の高さが小さいものから大きいものに変わるときに、画像の遅延読み込みもトリガーされます。

たとえば、コンソールを下から右に変更した場合、ブラウザの高さの画像が高くなると、さらにいくつかの画像リクエストが見つかります。

ブラウザコンソールの場所の変更

サイズ変更とスクロールリクエスト

メモリをスクロールして読み込みをスキップしますか？

ブラウザが正常に更新されると、最後のスクロール位置が記憶されます。以前はページのスクロール位置が非常に低く、この時点でページが更新された場合、最初の画像は読み込まれませんか？

テストしたところ、本当であることがわかりました。最初の画像は読み込まれず、下の画像のみが読み込まれます。ブラウザは非常にスマートなようです。

ロード後にスクロールして画像を更新します

5.スクロール位置に応じて、遅延読み込みは最初と最後の画像要求を無視します。

3つ、構文とパラメーター

HTML loading属性でサポートされ'lazy'ている次の値に加えて：

怠惰

画像またはフレームは遅延して読み込まれます。つまり、要素リソースが表示されようとしているときです。

熱心な

画像またはフレームは、すべてに関係なくロードされます。

自動

デフォルト。画像またはフレームは、ブラウザ独自の戦略に基づいて読み込まれます。

HTMLImageElementまたはHTMLIFrameElement要素がloading属性を明示的に設定していない場合、または属性loadingの値が無効である場合は、のように扱われます'auto'。

JSに関連する4つの実用的なガイドライン

1.現在のブラウザがloading =” lazy”をサポートしているかどうかを判断するにはどうすればよいですか？

次の3つの方法を使用できます。

var isSupportLoading = 'loading' in document.createElement（ 'img'）;

または：

var isSupportLoading = 'loading' in new Image（）;

または：

var isSupportLoading = 'loading' in HTMLImageElement.prototype;

2.読み込み属性値を取得する方法

要素の<img>DOM変数名がでimgあるとすると、画像要素のloading属性値は次の構文で直接取得できます。

var attrLoading = img.loading;

属性値をロードした結果を取得します

ブラウザがネイティブのloading遅延読み込みをサポートしていない場合、undefinedたとえばFirefoxブラウザでは次のように返されます。

読み込み属性を取得できません

3.カスタム拡張機能の読み込みは上書きされません

例えば：

HTMLElement.prototype.loading = function（）{};
img = document.querySelector（ '[loading]'）;
img.loading;

HTMLElementプロトタイプloadingで指定された関数を拡張しloadingますが、画像要素の元の属性には影響しません。

Chromeでの画像の読み込み属性はまだあります

ただし、Firefoxなどのサポートされていないブラウザの場合、明らかに影響を受けます。

Firefoxブラウザでの画像の読み込み

4.サポートされていないブラウザと互換性を持たせるにはどうすればよいですか？ポリフィル？

GitHubには、ネイティブの遅延読み込み読み込み属性と互換性のあるプロジェクトがあります。プロジェクトアドレス：https：//github.com/mfranzke/loading-attribute-polyfill

原則を見ましたが、<noscript>タグに画像のHTMLコードを入れる必要があります。

<noscript class = "loading-lazy">
    <img
        src = "example.jpg"
        Loading = "lazy"
        alt = "zhangxinxu"
        width = "250"
        height = "150"
    />
</ noscript>

一連の疑問符がすぐに頭に浮かびました。鈍いのでご容赦ください。これはハンマー効果のポリフィルです。JavaScriptを使用しない場合のパフォーマンスは確かに仕様に準拠していますが、JavaScriptを使用する場合、コードの文字列は基本的に実用的な価値がありません。画像素材のため。サイズを占め、レイアウトと密接に関連しています。<noscript>ラベルに配置すると、幅と高さの寸法はすべて0になります。経験は厄介でまったく受け入れられません。

唯一の実行可能な解決策は、ネイティブロードをサポートするHTMLなどのHTMLコードが出力されるときに、ブラウザに応じて（できればJSオブジェクトによって判断される）異なるHTMLコードを出力することです。

<img src = "example.jpg" Loading = "lazy" alt = "zhangxinxu" width = "250" height = "150">

これはサポートされていません：

<img data-src = "example.jpg" Loading = "lazy" alt = "zhangxinxu" width = "250" height = "150">

次に、従来のJavaScript遅延読み込みとスクロール読み込みを使用して実現します。

5.研究と実践の結果の要約

最後に、要約すると、ネイティブ遅延読み込みの5つの動作特性は次のとおりです。

遅延読み込みは画面の高さに関係します。高さが小さいほど、読み込みの数は少なくなりますが、線形関係ではありません。
遅延読み込みの負荷の数はネットワーク速度に関連しています。ネットワーク速度が遅いほど負荷の数は多くなりますが、線形の関係ではありません。
遅延読み込みはバッファリングされず、スクロールすると新しい画像リソースの読み込みがトリガーされます。
遅延読み込みは、画面の高さが小さいものから大きいものに変わったときなど、ウィンドウのサイズが変更されたときにもトリガーされます。
遅延読み込みでは、たとえばページが高いスクロール高さで読み込まれる場合など、後続の画像リソースが最初に読み込まれることもあります。

JavaScriptに関連するいくつかの動作特性：

ブラウザがネイティブロードをサポートしているかどうかを判断するには、'loading' in XXX判断を使用するのが最善です。
読み込み属性値を直接取得しますimg.loading;
ネイティブロードは書き込み可能ではありません。たとえば、HTMLImageElement.prototype.loadingは不正な呼び出しを報告します。
ポリフィルは夢であり、ブラウザのサポートを待つことしかできません。

上〜

まだ24:00に1分ありますね。

休日の前の最終日に、かなり最先端の研究エッセイに追いついて、皆さんが幸せで幸せな建国記念日になることを願っています。

ちなみに、私の新しい本「CSS Selector World」が発売されています。建国記念日から戻ってきたら、それをサポートするためにコピーを購入することを忘れないでください。ええと、CSSスキルを向上させるためにコピーを購入してください。