Javascript：如何檢查圖像是否已被緩存

我剛剛開始學習一點JavaScript，我想知道是否有方法檢查圖像是否已加載到緩存。Javascript：如何檢查圖像是否已被緩存

在我的腳本im從另一個網頁加載一些隨機圖像並顯示它們。當第二次顯示相同的圖像時，腳本將不會使用已經加載的圖像，而是再次加載相同的圖像，以便其中兩個存儲在我的緩存中。

現在我想檢查圖像是否已經存儲在緩存中，如果是，請使用緩存的圖像而不是再次加載圖像。

我的代碼：

<script> 
    var img = document.createElement('img'); 
    var index; 

    //On Click create random 3digit number between 1 and 100 
    document.getElementById('image').onclick = function(){ 
     var index = '' + Math.floor(Math.random() * 100 +1); 

     while(index.length < 3) { 
      index = '0' + index; 
     } 

     loadImages(index); 
    }; 

    //Load the image with the created number 
    function loadImages(id) { 
     var src = 'someWebPage/' + id +'.png';    

     img.onload = function() { 
      document.getElementById('image').getContext("2d").drawImage(img, 0, 0, 300, 300); 
     } 

     img.src = src;    
    } 
</script>

我的緩存圖片：

正如你可以看到030.png和032.png在高速緩存中的兩倍。

希望你能給我一些建議。

編輯： 只爲面對這個問題的任何人，它實際上不是一個。 Chrome已經做的一切正確，我只是沒有注意到。正如您在Size列中看到的那樣，圖片已經從我的緩存中加載。

來源

2017-07-03 FatTony

https://stackoverflow.com/questions/2446740/post-loading-check-if-an-image-is-in-the-browser-cache –

瀏覽器在內部處理這個......你無法控制它並且無法訪問緩存 – charlietfl

處理緩存（在此上下文中）的方式是由瀏覽器使用一組頭來與服務器進行協商，以基本上告訴服務器「我已擁有此資源的此版本」，服務器可以響應「好的，這仍然有效，不需要下載任何新的東西」。所以你不應該關心JavaScript端的緩存，而是要確保你在服務器端設置了正確的Cache-Control頭文件。您的服務器/框架可能已經存在關於如何在那裏設置緩存的問題/答案。

來源

2017-07-03 11:55:38 vijoc

好的，謝謝，但有什麼方法可以直接從緩存中訪問圖像嗎？所以我不必把這份工作交給瀏覽器，但是我可以檢查一下，例如'030.png'是否已經存在於緩存中？謝謝你的幫助。 – FatTony

那麼這裏有實驗性的[Cache API]（https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage），儘管你不能真正依靠它來進行生產使用，因爲它是*實驗*。除此之外，據我所知，沒有API可以訪問緩存。你可以自己做一些自定義的緩存層，但如果服務器配置正確，那麼這對瀏覽器本身已經處理的東西來說似乎有些過分。 – vijoc

好吧，既然這不是一個真正的程序，但是更多的是由我自己做的，我會把它留給瀏覽器，坦克來幫助你。 – FatTony

Javascript：如何檢查圖像是否已被緩存

回答

相關問題