圖片預加載

/**
 * 預加載
 * @param {Array} dataList  預加載數據
 * @param {Array} attrArray 預加載屬性，可選
 */
export function  preLoad(dataList,attrList){
  //如有指定對象屬性
  let imgList = [];
  if(attrList){
    dataList.forEach(element => {
      attrList.forEach(attr=>{
        if(element[attr]){
          const img = new Image();
          img.src = element[attr];
          imgList.push(img);

        } 
      })
    });
  }else{
    dataList.forEach(element => { 
      const img = new Image();
      img.src = element;
      imgList.push(img);       
    });
  }
  
  return imgList;
}

測試瀏覽器：chrome、firefox

在Firefox下並無from memory cache以及from disk cache的狀態展示 相同的資源在chrome下是from
disk/memory cache，可是Firefox通通是304狀態碼
即Firefox下會緩存資源，可是每次都會請求服務器對比當前緩存是否更改，chrome不請求服務器，直接拿過來用

200 OK (from disk cache) 是瀏覽器沒有跟服務器確認， 就是它直接用瀏覽器緩存。 304
是瀏覽器和服務器確認了一次緩存有效性，再用的緩存。客戶端和服務器端只須要傳輸不多的數據量來作文件的校驗，若是文件沒有修改過，則不須要返回全量的數據。可以節省大量的網絡帶寬，並減小了頁面的渲染時間。

圖片img的預加載

方法一:直接用src進行預加載,但不保存

<img :src="data[current].imagePath">
 mounted() {  
     preLoad(this.data,['imagePath']);
}

結果：

1. 谷歌 切換圖片速度快，確實有預加載. 初次 200 disk cache

   

   切換沒有發XHR，發了Img。200 OK (from disk cache) 是瀏覽器沒有跟服務器確認，即直接用瀏覽器緩 存。

   

2. 火狐切換圖片速度慢，並無預加載 初次，沒有「已緩存」標識。第二個框框內是要預加載的圖

   

   第一次切換,仍是發了請求

   第二次切換，正常沒有請求（默認狀況下狀態碼爲200的響應能夠被緩存）。
   因此火狐預加載並無成功。

---

方法二： 把預加載的掛載到data上（最好）

結果：火狐、谷歌表現一致，都切換較快，沒有發請求

<div ref="solution-img"></div>
mounted() {    
    this.preLoadImg = preLoad(this.data,['bgimagePath']);
}
methods: {
    changeActive(index) {
      this.current = index;
      let dom = this.$refs['solution-img'];
      if(dom.childNodes.length > 0) dom.removeChild(dom.childNodes[0]);
      dom.appendChild(this.preLoadImg[index]);
    }

  },

背景圖片的預加載

不作任何處理結果：第一次請求返回200。第一次加載後都是304

---

方法一 ：使用css預加載

#preload-01 { background:  url('~@/assets/img/market/icon-00.png') no-repeat -9999px -9999px; }    
#preload-02 { background:  url('~@/assets/img/market/icon-01.png') no-repeat -9999px -9999px; }

結果：和不處理表現一致。初次加載也沒有請求這些圖片。

方法二：src預加載，但不保存

{
 background-image: url('~@/assets/img/market/icon-10.png')  ;       
 &:hover{  background-image:url('~@/assets/img/market/icon-11.png')}
}
myPreLoad(){
      let images = [  
        require('@/assets/img/market/icon-10.png'),
        require('@/assets/img/market/icon-11.png'),
      ];
      preLoad(images);

}

結果：第一次hover 狀態碼304。以後切換沒有發請求。火狐和谷歌表現一致，都是304

方法三：把預加載的掛載到data上

handleMouseenter(index){
this.getDom(index).style.backgroundImage = "url(" +this.preLoadImage[index*2+1].src + ")";

},

結果：谷歌切換沒有發請求。可是火狐會發請求，並返回304。

方法四：雪碧圖（最好）

.backgroud-box{
  width: 137px ;
  height: 113px;
  background-image: url('./icon-1.png') ;    
  background-position-x:100%;
  background-position-y:0;
}
              
&:hover>.backgroud-box { background-position-y:-113px;}

以上方法都會出現切換背景圖片閃爍。用這個方法位移背景就不會。並且第一次加載就把圖片下載下來了，切換也不會發請求，由於用的是同一張圖

我的結論

一、由於

在Firefox下並無from memory cache以及from disk cache的狀態展示。 相同的資源在chrome下是from
disk/memory cache，可是Firefox通通是304狀態碼

因此火狐下每次操做到src或者url都要發出請求。

二、恰好<img>標籤是一個Image對象，能夠直接插入html，因此能夠保存在data上緩存。304請求雖然也是能夠縮短渲染時間，可是直接保存在data上能夠免去一次請求，響應時間更快。

三、背景圖片涉及到改變url，因此沒辦法直接用保存在data上的數據。