預載入基本概念：當頁面開啟圖片提前載入，並且快取在使用者本地，需要用到時直接進行渲染；在瀏覽圖片較多的網頁（百度相簿，淘寶京東等），可以有更好的使用者體驗；

一張圖片的預載入

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物件

以上就是三種預載入的方法，僅供參考；

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。