圖片預加載

wanghui 發(fā)布于2019-08-23 18:20 / 2035人閱讀

摘要：第二個框框內是要預加載的圖第一次切換還是發(fā)了請求第二次切換，正常沒有請求默認情況下狀態(tài)碼為的響應可以被緩存。方法二把預加載的掛載到上最好結果火狐谷歌表現(xiàn)一致，都切換較快，沒有發(fā)請求背景圖片的預加載不做任何處理結果第一次請求返回。

/**
 * 預加載
 * @param {Array} dataList  預加載數(shù)據(jù)
 * @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的狀態(tài)展現(xiàn) 相同的資源在chrome下是from
disk/memory cache，但是Firefox統(tǒng)統(tǒng)是304狀態(tài)碼
即Firefox下會緩存資源，但是每次都會請求服務器對比當前緩存是否更改，chrome不請求服務器，直接拿過來用200 OK (from disk cache) 是瀏覽器沒有跟服務器確認， 就是它直接用瀏覽器緩存。 304
是瀏覽器和服務器確認了一次緩存有效性，再用的緩存。客戶端和服務器端只需要傳輸很少的數(shù)據(jù)量來做文件的校驗，如果文件沒有修改過，則不需要返回全量的數(shù)據(jù)。能夠節(jié)省大量的網(wǎng)絡帶寬，并減少了頁面的渲染時間。

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

 
 mounted() {  
     preLoad(this.data,["imagePath"]);
}

結果：

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

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

火狐切換圖片速度慢，并沒有預加載初次，沒有“已緩存”標識。第二個框框內是要預加載的圖

第一次切換,還是發(fā)了請求

第二次切換，正常沒有請求（默認情況下狀態(tài)碼為200的響應可以被緩存）。
所以火狐預加載并沒有成功。

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

結果：火狐、谷歌表現(xiàn)一致，都切換較快，沒有發(fā)請求


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; }

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

方法二：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 狀態(tài)碼304。之后切換沒有發(fā)請求。火狐和谷歌表現(xiàn)一致，都是304

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

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

},

結果：谷歌切換沒有發(fā)請求。但是火狐會發(fā)請求，并返回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;}

以上方法都會出現(xiàn)切換背景圖片閃爍。用這個方法位移背景就不會。而且第一次加載就把圖片下載下來了，切換也不會發(fā)請求，因為用的是同一張圖

個人結論

1、因為

在Firefox下并沒有from memory cache以及from disk cache的狀態(tài)展現(xiàn)。 相同的資源在chrome下是from
disk/memory cache，但是Firefox統(tǒng)統(tǒng)是304狀態(tài)碼

所以火狐下每次操作到src或者url都要發(fā)出請求。

2、剛好標簽是一個Image對象，可以直接插入html，所以可以保存在data上緩存。304請求雖然也是可以縮短渲染時間，但是直接保存在data上可以免去一次請求，響應時間更快。

3、背景圖片涉及到改變url，所以沒辦法直接用保存在data上的數(shù)據(jù)。

云服務器 GPU云服務器圖片預加載 JS圖片預加載 js實現(xiàn)圖片預加載預加載

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105068.html

Javascript實現(xiàn)圖片的預加載功能

摘要：本文同步自我得博客最近要用做一個動畫功能，為了確保動畫在播放的時候能夠順利和平滑，我需要對所用到的圖片素材進行預加載，下面跟大家分享一下我實現(xiàn)這個功能的過程單圖片預加載目前最常見的一種實現(xiàn)方式如下接下來可以使用圖片了接下來可以使用圖片了首先本文同步自我得博客：http://www.joeray61.com 最近要用javascript做一個動畫功能，為了確保動畫在播放的時候能夠順利和...

KavenFan 2019-08-21 10:19 評論0 收藏0
圖片的預加載和懶加載

摘要：圖片的預加載是提升用戶體驗而損失性能的一種做法，而懶加載的性能就比較好了，所以將兩個結合起來放到程序中是一種不錯的選擇。最近在做H5滑頁時，遇到一些比較大的場景，動輒二十、三十頁，而圖片更是可恨的能達到上百個，所以就會導致場景在加載的時候遇到網(wǎng)速比較慢的時候，用戶等待的時間特別長，這樣的話，就有可能導致一部分的用戶沒有耐心，而丟失這部分用戶，于是就有了這里的圖片的預加載和懶加載，記個...

SwordFly 2019-08-21 10:37 評論0 收藏0
懶加載和預加載

摘要：使用默認是對象，如果是是指使用標簽，可以跨域，三懶加載和預加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區(qū)別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...

appetizerio 2019-08-29 16:57 評論0 收藏0
懶加載和預加載

摘要：使用默認是對象，如果是是指使用標簽，可以跨域，三懶加載和預加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區(qū)別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...

Shonim 2019-08-02 11:41 評論0 收藏0
懶加載和預加載

摘要：使用默認是對象，如果是是指使用標簽，可以跨域，三懶加載和預加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區(qū)別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...

hedzr 2019-08-23 12:19 評論0 收藏0