關於瀏覽器快取問題（圖片更換後，頁面仍優先讀取快取）

一葉知秋發表於2018-09-25
瀏覽器快取

因為部分需求（跟換頭像，切換輪播圖等等）改變圖片或者本地上傳新圖片，會導致圖片快取問題，從而達不到預期效果，還是載入原圖片
查詢了一些資料，總結出2個步驟：

1.在圖片的路徑的後面拼接 ‘?內容’ 解決，具體如下

（1）在圖片src路徑後面加上時間戳，使瀏覽器（移動端裝置）認為每次載入的不是同個圖片。
例子：

  timestamp(url) {
    let getTimestamp = new  Date().getTime();
    url= url + "?timestamp=" + getTimestamp
      return url
  }

<img width=”188″ height=”150″ src=”url”>

（2）在圖片src路徑後面加上隨機數，使瀏覽器（移動端裝置）認為每次載入的不是同個圖片。

例子：

<ul class=”imglist” >
<li><img width=”188″ height=”150″ src=”/images/photo/ico/pic_1_0128.jpg?random=”> </li>
</ul>

    $(".imglist").find("li").each(function(index,domEle){
        var obj = $(this).find("a").find("img");
        obj.attr("src",obj.attr("src")+Math.random());
    });

2.（瀏覽器）在<head>中加入這3句話：

<meta http-equiv=”pragma” content=”no-cache”/>
<meta http-equiv=”cache-control” content=”no-cache”/>
<meta http-equiv=”expires” content=”0″/>

表示不要快取資料

以上是解決方法：大家視情況使用

相關文章