2011-10-21 8 views
6

が、これは私がこれまで持っているコードです:image.completeを使用して、画像がクロムに​​キャッシュされているかどうかを確認しますか?私は外部の画像がJSとブラウザにキャッシュされているかどうかを確認しようとしている

<html> 
    <head></head> 
    <body> 

    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 

    <script> 

     function cached(url) { 
      $("#imgx").attr({"src":url}); 
      if(document.getElementById("imgx").complete) { 
       return true; 
      } else { 
       if(document.getElementById("imgx").width > 0) return true; 
      } 

      return false; 
     } 

    </script> 

    <img id="imgx" src="" /> 

    <script> 

     $(document).ready(function(){ 
      alert(cached("http://www.google.com/images/srpr/nav_logo80.png")); 
     }); 

    </script> 

    </body> 
</html> 

これは、Firefox上で完璧に動作しますが、それは常にクロムにfalseを返します。

誰かがそれをChromeで動作させる方法を知っていますか?

+0

アセットがキャッシュされているかどうかはなぜ重要ですか? :/ – Matchu

+0

W3C標準にはそのようなAPIがありませんので、あなたは良いことではないブラウザ固有のハックを使用しています – Ankur

+0

画像がキャッシュされていても、ブラウザが次のJavaScript行を実行する前にイメージのロードと表示を完了したことはありません。 – RoToRa

答えて

13

私はコードをjQueryでより独立させるために、プレーンJavaScriptで書き直しました。コア機能は変更されていません。 フィドル:http://jsfiddle.net/EmjQG/2/

function cached(url){ 
    var test = document.createElement("img"); 
    test.src = url; 
    return test.complete || test.width+test.height > 0; 
} 
var base_url = "http://www.google.com/images/srpr/nav_logo80.png" 
alert("Expected: true or false\n" + 
     cached(base_url) 
     + "\n\nExpected: false (cache-busting enabled)\n" + 
     cached(base_url + "?" + new Date().getTime())); 
//false = not cached, true = cached 

初めて、私はfalse and falseを取得します。コードをもう一度実行すると、true and falseとなります。 .complete.height + .widthを使用


は、期待される結果(FF 3.6.23、クロム14)が得られます。

あなたのChromeブラウザでキャッシュを無効にしている可能性があります。そうでない場合は、配信された画像のHTTP headersを確認してください(Cache-controlはありますか?)。 このヘッダーはGoogleのサンプルにあります

イメージの読み込みが完了していないことを検出する場合は、this questionをご覧ください。

+0

キャッシュが有効になっており、キャッシュコントロールが存在しません。イメージが瞬時に(キャッシュから)読み込まれるのか、それとも徐々に読み込まれるのかを知りたいと思うもの。私が投稿したコードはFFで正常に動作しますが、クロームではうまく動作しません。 – user979390

+0

@ user979390私は実用的なテストケースを含んでいます。 http://jsfiddle.net/EmjQG/2/を参照してください。 –

+0

これはクロムにも「真偽」を返しますか?私にとっては常にfalseを返す - クロムにfalse、私は最良のクロスブラウザのソリューションは、画像のタイミングをタイミングするためのカウンタを設定することになると思う。 – user979390

関連する問題