如何清除頁面的圖片快取
阿新 • • 發佈：2019-01-08
在大多數情況下，瀏覽器為了提高效能，會有相應的快取措施，其中快取圖片是一種常見的做法，因為圖片在請求時需要佔用大量的流量，所以在短時間內快取圖片可以起到不錯的提高響應速度的作用。但是在有些時候，我們不希望瀏覽器的這種對於圖片的快取，舉個例子，使用後臺管理前臺顯示的圖片內容時，為了能夠看出修改圖片後的效果，我們需要實時的反饋，及在後臺修改完圖片後，無論後臺還是前臺，再次訪問時看到的應該就是修改過後的圖片。然而在實際中，修改後的頁面在一段時間內還是原來的快取圖片，這樣就不好，一種好的做法是把需要清除快取的圖片，每次訪問的url都新增一個隨機數作為引數，這樣瀏覽器就不會把快取的圖片再次顯示，而是會重新向伺服器提出獲取圖片資源的請求。
具體例項如下：
頁面上的圖片元件： <img src="images/image.jpg" id="img-id"/>
載入的時候使用隨機數再次請求伺服器而不是使用快取圖片： 1）使用jquery實現： $(document).ready(function(){ //重新載入圖片 $('#img-id').src=$('#img-id').src+"?"+Math.random();
});
2)使用js實現： document.onload(function(){ document.getElementById('img-id').src=document.getElementById('img-id').src+"?"+Math.random(); });
這樣，通過以上做法就可以達到載入圖片時清除快取的目的了。
頁面上的圖片元件： <img src="images/image.jpg" id="img-id"/>
載入的時候使用隨機數再次請求伺服器而不是使用快取圖片： 1）使用jquery實現： $(document).ready(function(){ //重新載入圖片 $('#img-id').src=$('#img-id').src+"?"+Math.random();
});
2)使用js實現： document.onload(function(){ document.getElementById('img-id').src=document.getElementById('img-id').src+"?"+Math.random(); });
這樣，通過以上做法就可以達到載入圖片時清除快取的目的了。