001_Chrome 76サポートネイティブのHTMLの画像遅延ロードレイジーローディング

コンテンツの表
遅延ロードは何ですか？
文法と使用パラメータ？
特徴は何ですか？
実践と関連JS

遅延ロードとは何ですか？

背景

Webアプリケーションは、（データベースを照会することによって、それは非常に時間がかかり、資源である）バックエンド・サーバ・リソースへの頻繁な要求を必要とするが、要求が大きすぎると、サーバーの負荷が大きすぎる、遅い応答である原因になります、アプリケーションのフロントエンドとカトンページを引き起こすことは容易です。

この問題を解決するため、現在広く利用されているブラウザのキャッシュ技術が、データが大きすぎる場合には、限りがあるため、メモリ容量の不適切で、メモリ内のデータの多くは、それはコンピュータのパフォーマンスに影響を与えます。

このような背景、遅延ロードの技法開始に反対。

定義

レイジーロード（ロードオンデマンド、オンデマンド・ロード）独自の強力なデータ収集方法でユーザーがページをスクロールしたときに、自動的に、より多くのデータを得ることが可能であり、サーバ側のリソース消費の最大範囲を削減しながら、得られた新たなデータは、元のデータの表示には影響しませんと。

また、ゆっくりと応答するためのサーバーの原因の多くのリクエストに一時間応答を防止またはサーバーなどにカトンページをクラッシュさせるために需要文字通り、あるロード、遅延ロード、およびメインページとして知られるレイジーローディング、。

文法と使用パラメータ？

あなたが絵を作りたい場合にのみロードされたときに近いブラウザウィンドウ、その上に次のコード：

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

必要はありませんその他 JavaScriptコードレイジーローディング機能を実現することができます。

加えて、HTML属性値のロードのサポートlazy、いくつかの次があります：

lazy
場合エレメントリソースローディング見れようとしている画像フレームまたは遅延読み込み、。
eager
ピクチャーフレームまたはロードされたすべて無視します。
auto
デフォルト値。画像またはフレームは、ブラウザベースの独自のポリシーをロードします。
HTMLImageElementまたはHTMLIFrameElement要素が明示的にロードまたはロード属性プロパティの値を提供していないかのようにされ、無効でauto処理されます。

特徴は何ですか？

概要、5つの行動特性のネイティブ遅延ロード：

遅延ロードロード画面の高さと関連の数、高負荷の少ない小さな数ではなく、線形関係。
負荷および速度、低速、より多くの負荷量ではなく、線形関係の数に関連する遅延ロード。
レイジーローディングバッファがロードされていない、スクロールが新しいイメージリソースローディングをトリガされます。
遅延ロードのロード時間は、大きな時間に小さなから、このような画面の高さなど、ウィンドウサイズ変更トリガーのサイズは、変更されます。
遅延ロードは、高高度ページのロード時ローリングとしてロードされたバック・リソース、あろう画像をロードすることも可能です。

JavaScriptを使用して、いくつかの行動特性は、（見て関連の練習やJSの関連部分）：

ブラウザがネイティブ読み込み、XXXの判決で「ロード」の最高の使用をサポートしているかどうかを決定します。
属性値を取得することimg.loadingをロード直接であってもよいです。
ネイティブローディングは、たとえばHTMLImageElement.prototype.loadingは違法呼び出しを文句を言うだろう、書き込むことはできません。
ポリフィルは、私が唯一のブラウザがサポートするのを待つことができ、夢です。

実践と関連JS

現在のブラウザのサポートの負荷=「怠惰」を決定する方法1.？

以下の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;

参考：リンク