Javascriptでの画像の遅延読み込みについて詳しく解説

この記事では、JavaScript での画像の遅延読み込みの詳細な説明に関する関連情報を主に紹介します。ここでは、遅延読み込みと非同期読み込みの詳細な説明と使用方法について説明します。必要な方は、

JavaScript での画像の遅延読み込みの詳細な説明を参照してください。例の例

機能: ページを開く速度を保証します (ページが 3 秒以内に開けない場合は、デッドページとみなされます)

原則:

1) 最初の画面コンテンツの画像の場合: 最初にデフォルトの画像が対応する領域を占めます (デフォルトの画像は非常に小さい必要があり、通常は 5kb 以内に維持できます)。最初の画面コンテンツがロードされると (または遅延時間が与えられると)、実際の画像が表示されます。再度ロードされます

2) 他の画面上の画像の場合: デフォルトの画像もプレースホルダーとして使用され、スクロールバーが対応する領域までスクロールすると、実際の画像のロードが開始されます

拡張機能: データの非同期ロード: のみで開始します。最初の 2 つは画面データがロードされてバインドされ、それ以降のデータは処理されません。ページが該当する領域にスクロールすると、データが再度要求され、その後、レンダリング データがバインドされます。タグを空にし、 imgdisplay:none ; 背景画像を外側の p の背景画像にバインドし、ページが読み込まれるのを待ってから画像を読み込みます

タイマーまたは window.onload イベントを使用してから、取得した URL アドレスを img タグの要素 src にバインドします。ただし、取得した実際の画像アドレスが間違った src アドレスである場合、コンソールはエラーを報告するだけでなく、壊れた画像/フォーク画像がページに表示されます。 、ビジョンに影響を与える処理イベントは次のとおりです

 var oImg = new Image; //创建一个临时的img标签

 oImg.src = 真实的img的src地址

 oImg.onload=function(){ //-> 当图片能够正常加载

  img.src = this.src；

  img.syule.disolay = 'block'；

  oImg = null; //释放空标签

 }

ウェブサイトのパフォーマンスの最適化:

1. サーバーへのリクエストの数を最小限に抑え、「HTTP リクエストを削減」します

2. CSS/JS ファイルをマージします

3. ICON 画像を結合 -> スプライト画像/CSS スクリプト

4. 画像の遅延読み込み

5. データの非同期読み込み

6. モバイル側では、我が国は簡単なプロモーションページを作成しており、 CSSとJSをインラインで書く

以上がJavascriptでの画像の遅延読み込みについて詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。