Javascript如何實現圖片預加載？

今天小編就為大家帶來一篇有關Javascript實現圖片預加載的文章。小編覺得挺實用的，為此分享給大家做個參考。一起跟隨小編過來看看吧。

什么是預加載：

當頁面打開圖片提前加載，并且緩存在用戶本地，需要用到時直接進行渲染；在瀏覽圖片較多的網頁（百度圖庫，淘寶京東等），可以有更好的用戶體驗；

一張圖片的預加載

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事件的回調函數，才能打印出圖片的寬度；

加載多張圖片時，要提前在本地進行緩存，下面要講三種預加載多張圖片的例子：

第一種：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、給這個圖片增加事件偵聽load；

3、加載完成后,將加載進來的圖片復制一個新的,放在數組中；

4、修改num；如果num的值大于100停止執行，并且打印數組；

5、給這個圖片的地址賦予一個新地址,因為改變圖片的地址就會重新觸發load，所以會繼續進入loadHandler函數,不斷加載,直到加載完成。

第二種：生成器函數實現預加載

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 函數；

2、在Promise中創建圖片；

3、判斷圖片是否可以加載，加載成功執行Promise的回調函數resolve；

4、執行一次resume函數，并在函數里面執行Promise在resolved狀態下的函數

5、反復執行s.next().value，直到全部圖片加載完成；

第三種：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);//打印圖片數組
  })

這種方法是ES6的方法用到了async和await將異步轉換為阻塞式同步；

說明：

1、fn 這個函數使用async 表示這個函數是一個異步函數

2、這個函數中就可以使用await ，await作用就是讓異步變為同步等待，異步變成了阻塞式等待

3、當異步全部完成時，再繼續向后運行

4、async函數中的await后面只能跟的時Promise對象

5、async函數執行后返回的是一個Promise對象

以上就是Javascript實現圖片預加載的具體操作，代碼詳細清楚，如果在日常工作遇到這個問題，希望你能通過這篇文章解決問題。如果想了解更多相關內容，歡迎關注億速云行業資訊頻道！