画像のプリロードを実装する js

プリロードとは:

ページが開くと、画像が事前にロードされ、ユーザーのローカル領域にローカルにキャッシュされます。これらは、ブラウジング時に、必要なときに直接レンダリングされます。たくさんの写真がある Web ページ (Baidu Gallery、Taobao JD.com など) はユーザー エクスペリエンスを向上させることができます;

写真のプリロード

var img=new Image();
    img.addEventListener("load",loadHandler);
    img.src="./img/1.jpg";
    document.body.appendChild(img);
    console.log(img.width)；

    function loadHandler(e){
      console.log(img.width);//当前图片的原始宽度
    }

上記のコードでは、写真には次のようなものがあります。まだロードされておらず、印刷される画像の幅が の場合、画像の幅は 0 です。画像がロードされ、レンダリングのために DOM ツリーに書き込まれた後でのみ、load イベントのコールバック関数をトリガーして幅を印刷できます。画像の;

複数の画像をロードする場合は、事前にローカルにキャッシュする必要があります。複数の画像をプリロードする 3 つの例を次に示します:

最初: プリロードのロード

Load 100画像、画像名は 1.jpg ~100.jpg (以下同じ);

var num=1;
    var list=[];
    loadImage();
    function loadImage(){
      var img=new Image();
      img.addEventListener("load",loadHandler);
      img.src="./img/"+num+".jpg";
    }
    function loadHandler(e){
      list.push(this.cloneNode());//复制当前图片元素
      num++;
      if(num>100){console.log(list);return;}
      this.src="./img/"+num+".jpg"; //修改地址继续后触发load事件
    }

上記のコードは次を示します:

1. 画像を作成します;

2. この画像にイベント検出を追加しますロードをリッスンします;

3. ロードが完了したら、ロードされた画像を新しい画像にコピーして配列に配置します;

4. num を変更します; if num 値が 100 より大きい場合、実行は停止し、配列が出力されます;

5. アドレスに新しいアドレスを与えます画像のアドレスを変更するとロードが再トリガーされるため、loadHandler 関数に入り続け、ロードが完了するまで継続的に Load が行われます。

2 番目のタイプ: ジェネレーター関数はプリロードを実装します

function loadImage(src){
    return new Promise(function(resolve,reject){
      let img=new Image();
      img.onload=function(){ 
        resolve(img);//加载时执行resolve函数
      }
      img.onerror=function(){ 
        reject(src+'这个地址错误');//抛出异常时执行reject函数
      }
      img.src=src;
    })
  }
  function* fn(){
    for(let i=1;i<100;i++){
      yield loadImage("./img/"+i+".jpg");
    }
  }
  let s=fn();
  let value=s.next().value; 
  resume();
  function resume(){
    value.then(img=>{
      console.log(img);//打印加载的图片标签
      value=s.next().value;
      if(value)resume();
    });
  }

上記のコードは次のことを示しています:

1. ジェネレーター関数を実行し、loadImage 関数を 1 回実行します;

2. Promise でイメージを作成します;

3. 画像をロードできるかどうかを判断し、ロードが成功した場合は Promise コールバック関数の解決を実行します;

4.関数を一度再開し、関数は解決された状態で Promise 関数を実行します

5、すべての画像が読み込まれるまで s.next().value を繰り返し実行します;

3 番目のメソッド: async/ await プリロード画像

function loadImage(src){
    let p=new Promise(function(resolve,reject){
      let img=new Image();
      img.onload=function(){//加载时执行resolve函数
        resolve(img);
      }
      img.onerror=function(){
        reject(src);
      }
      img.src=src;
    })
    return p;
  }
  async function fn(){
    let arr=[];
    for(let i=3;i<80;i++){
      await loadImage(`./img/${i}-.jpg`).then(img=>{
        arr.push(img);
      });
    }
    return arr;
  }
  fn().then(list=>{
    console.log(list);//打印图片数组
  })

このメソッドは、async と await を使用して非同期をブロッキング同期に変換する ES6 メソッドです;

説明:

1. fn この関数は async を使用して、これを表します この関数は非同期関数です

#2. この関数では await を使用できます. await の機能は、非同期を同期待機に、非同期をブロック待機に変換することです

3. すべての非同期操作が完了したら、逆方向に実行を続けます

4. async 関数の await の後には Promise オブジェクトのみが続きます

5 . async 関数 実行後に返されるのは Promise オブジェクトです

推奨チュートリアル:

js 入門チュートリアル

以上が画像のプリロードを実装する jsの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。