Javascript：画像が既にキャッシュされているかどうかを確認する方法

Question

JavaScriptを少し学び始めたばかりです。画像がキャッシュに読み込まれているかどうかを確認する方法があるかどうかは疑問でした。

私のスクリプトでは、別のWebページからいくつかのランダムな画像を読み込んで表示しています。 同じ画像が2度目に表示されると、スクリプトは既に読み込まれた画像を使用せず、代わりに同じ画像を読み込んで2つの画像をキャッシュに保存します。

イメージが既にキャッシュに格納されているかどうかを確認したい場合は、イメージをキャッシュに再度格納するかどうかを確認します。

マイコード：私のキャッシュの

<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がキャッシュに二回ある見ることができるように。

あなたは私にいくつかのアドバイスを与えることができます。

編集： この問題に直面している他の人にとっては、それは実際には1つではありません。 Chromeはすでにすべてのことを正しく行いました。 Sizeの列にあるように、画像はすでにキャッシュから読み込まれています。

Answer 1

キャッシュの処理方法（このコンテキストで）は、ブラウザが基本的にサーバーに「このバージョンのこのリソースを既に持っている」ことを伝えるために一連のヘッダーを使用してサーバーとネゴシエートすることによって処理されます。 "OK、それでも有効です。新しいものをダウンロードする必要はありません"。したがって、JavaScript側のキャッシュについては心配する必要はありませんが、サーバー側に正しいCache-Controlヘッダーを設定していることを確認してください。あなたのサーバ/そこにキャッシュを設定する方法の選択のフレームワークのための質問/回答はおそらくすでにあります。