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

Question

我剛剛開始學習一些JavaScript，我想知道是否有一種方法可以檢查圖像是否已經加載到緩存中。

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

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

我的代碼：

<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 ”列中所見，圖片已從我的緩存中加載。

Answer 1

緩存的處理方式（在這種情況下）是瀏覽器使用一組標頭與服務器進行協商，以便基本上告訴服務器“我已經擁有此資源的此版本”，然后服務器可以對此做出響應“確定，仍然有效，無需下載任何新內容”。 因此，您不必擔心JavaScript方面的緩存，而應確保在服務器端設置了正確的Cache-Control標頭。 關於服務器/框架的選擇可能已經存在有關如何在此處設置緩存的問題/解答。