• 首先說(shuō)明一點(diǎn)的是，如果你的項(xiàng)目中只需要幾張?zhí)崆邦A(yù)加載的圖片可以進(jìn)行使用，要是多的話，可能會(huì)導(dǎo)致你的項(xiàng)目卡頓，如果你使用了圖片預(yù)加載，那么怎么驗(yàn)證呢，我們可以在network中查看有沒(méi)有進(jìn)行提前加載，還有將我們當(dāng)前調(diào)試項(xiàng)目中的網(wǎng)絡(luò)切換一下，變?yōu)?g等，在切換或者是點(diǎn)擊事件讓你的圖片進(jìn)行顯示的時(shí)候，這個(gè)時(shí)候你可以在看看network中有沒(méi)有重新加載請(qǐng)求圖片，如果重新請(qǐng)求了，那么你的預(yù)加載就是有問(wèn)題的，他是預(yù)加載了，但是你圖片的路徑可能不一致，只有沒(méi)有在network中進(jìn)行重新請(qǐng)求，那么說(shuō)明你的圖片預(yù)加載是正確的

• 下面先看看代碼的實(shí)現(xiàn)

    // todo 預(yù)加載圖片
  loadImage(url, callback) {     
    var img = new Image(); //創(chuàng)建一個(gè)Image對(duì)象，實(shí)現(xiàn)圖片的預(yù)下載     
    img.onload = function(){
        img.onload = null;
        callback(img);
    }
    img.src = url; 
}

• 進(jìn)行調(diào)用，這里我使用了componentDidMount生命周期

  componentDidMount() {
    //todo React.getImage('loading')這個(gè)是一樣的，換膚的時(shí)候，里面的路勁是不同的
    this.loadImage(React.getImage('loading'),(img)=>{
      console.log(img);//這里可以不寫(xiě)或者是將上面方法中的回調(diào)函數(shù)去掉
    });
  }

• 解釋下這個(gè)React.getImage('loading')；這是我寫(xiě)的全局的圖片路徑，要換膚切換圖片，你們可以改成自己的圖片路徑就可以了

  
  
  image.png

• 上面的圖片是初始化的時(shí)候，進(jìn)行了圖片預(yù)加載

image.png

• 這張圖片是使用移動(dòng)端的切換網(wǎng)絡(luò)進(jìn)行的調(diào)試一般是online，low-end mobile是低端手機(jī)的意思，網(wǎng)速也是很慢的