画像のプリロードと遅延ロードを実装するJavaScript

//ここでは写真の数を書きました。写真の名前はアラビア数字で、接尾辞はjpgである必要があります。
//次のコメントでは別のメソッドを紹介します。そのうちの1つを選択してください。もちろん、コメントエリアにメソッドを残して一緒に学ぶこともできます。function preload() {
  (var i=1;i<13;i++){
    var 画像 = [];
    img[i]=new Image(); //imgオブジェクトを作成 img[i].src="img/"+i+".jpg"
  }
}
/*関数プリロード() {
    img1=new Image(); //img オブジェクトを作成 img1.src="xxx/xxx/xxx.jpg" //画像アドレス img2=new Image();
    画像2.src="xxx/xxx/xxx.jpg"
    img3=新しい画像();
    画像3.src="xxx/xxx/xxx.jpg"
    img4=新しい画像();
    画像4.src="xxx/xxx/xxx.jpg"
    ......
  }
}*/

// パラメータ fun を持つ関数を定義します
関数addLoadEvent(fun) {
  // ロードされた関数を oldnload 変数に割り当てます。var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    ウィンドウのonload = 楽しい;
  } それ以外 {
    window.onload = 関数() {
      //変数を割り当てた関数 oldonload() がここで実行されます。
      // ここで渡された func パラメータ fun() が実行されます。
    }
  }
}
LoadEvent を追加します(プリロード());
/*
 oldonload は自己定義変数であり、onload イベントが割り当てられます。onload イベントは、ページまたは画像が読み込まれた直後に発生します。
 onload はページと画像が読み込まれた後に実行されるイベントです。ただし、実際の使用では、onload を複数回割り当てると、後からコピーされたメソッドによって onload が上書きされ、onload は最後に割り当てられたメソッドのみを実行することになります。
 fun() は渡されるパラメータです。ここで fun() は preload() です。
このコードの意味は次のとおりです。
  (typeof window.onload != 'function')、つまり window.onload に値が割り当てられていない場合は、fun に直接割り当てられます。
  それ以外の場合は、プログラムが最初に値を割り当てたことを意味します。その後、ページが読み込まれた後、既存の関数が最初に実行され、次に新しい関数が実行されます。
  つまり、このコードは、onload で最初にロードされたメソッドが実行される (最初に実行される) ことを保証し、fun メソッドの実行時に上書きされるのを防ぎます (画像のプリロード)。
*/

/*
まず、写真のパスをカスタム属性に保存し、読み込み中の gif を src に保存して、画像が表示領域に到達したら、js を使用してカスタム属性を src に置き換えると、画像が表示されます。
オンデマンドで読み込む必要があるすべての画像をコレクションに取得します。スクロール バーをスクロールするときに、表示領域に表示される画像を判断します。表示された場合は、読み込み操作を実行します。
読み込みが完了すると、画像はコレクションまたは配列から削除され、最終的には配列に読み込む必要がある画像の数は少なくなります。
*/
<div>
  <img src="img/lode.img" data-src="img/1.img" class="lazylode">
  <img src="img/lode.img" data-src="img/2.img" class="lazylode">
  <img src="img/lode.img" data-src="img/3.img" class="lazylode">
  <img src="img/lode.img" data-src="img/4.img" class="lazylode">
  <img src="img/lode.img" data-src="img/5.img" class="lazylode">
  <img src="img/lode.img" data-src="img/6.img" class="lazylode">
  <img src="img/lode.img" data-src="img/7.img" class="lazylode">
  <img src="img/lode.img" data-src="img/8.img" class="lazylode">
</div>
<スクリプト>
 var lazylode = document.querySelectorAll('.lazylode');
//item() メソッドと length プロパティのみを持ち、配列オブジェクト メソッドを持たない配列のようなオブジェクトを取得します。var imgArr = Array.prototype.slice.call(lazylode);
//クラス配列を配列に変換します lazylodeImg();
// 実行される遅延読み込みメソッドは、最初に遅延読み込みを実行して表示領域に画像を読み込む必要があります var timer;
window.addEventListener('スクロール',function(){
  clearTimeout(timer); //スロットル timer=setTimeout(function(){
    lazylodeImg(); // 画面スクロールで遅延読み込みが実行されます }, 100);
}、間違い）
関数 lazylodeImg(){
  for(var i=0;i<imgArr.length;i++){
    if(isVisibleArea(imgArr[i])){//可視領域内にあるかどうかを判断 imgArr[i].src=imgArr[i].getAttribute('data-src');
      // src をカスタム属性 imgArr.splice(i,1); に変更します。// 読み込まれた画像を配列 array i-- から削除します。
      // 添字 1 の数字が配列から削除されるため、添字 2 の元の数字は 1 に繰り上げられます}
  }
}
関数isVisibleArea(el){
  var rect = el.getBoundingClientRect();
  // 表示領域から要素の上、左、その他の値を取得します。 return rect.bottom>0 && rect.top<window.innerHeight && rect.right>0 && rect.left<window.innerHeight;
  // 両方が true の場合は true を返します
}
</スクリプト>