2011-10-21 9 views
6

मैं जानने के लिए कि एक बाहरी छवि js साथ ब्राउज़र पर कैश किया गया है कोशिश कर रहे हैं, इस कोड को मैं अब तक है:छवि को पूर्ण करने के लिए image.complete का उपयोग करना है यदि छवि क्रोम पर कैश किया गया है?

<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> 

यह फ़ायरफ़ॉक्स पर पूरी तरह से काम करता है लेकिन यह हमेशा क्रोम पर झूठी देता है।

क्या किसी को पता है कि इसे क्रोम के साथ कैसे काम करना है?

+0

इससे कोई फर्क नहीं पड़ता कि संपत्ति कैश की गई है या नहीं? :/ – Matchu

+0

डब्ल्यू 3 सी मानक में ऐसा कोई एपीआई नहीं है, इसलिए मौका है कि आप कुछ ब्राउज़र विशिष्ट हैक का उपयोग करेंगे जो – Ankur

+0

करने के लिए अच्छी बात नहीं है, भले ही छवि कैश की गई हो, छवि को लोड करना अभी भी असीमित रूप से असीमित है, और यह संभावना नहीं है कि ब्राउज़र ने अगली जावास्क्रिप्ट लाइन को निष्पादित करने से पहले छवि को लोड करना और प्रदर्शित करना समाप्त कर दिया है। – RoToRa

उत्तर

13

मैंने jQuery पर इसे अधिक स्वतंत्र बनाने के लिए, सादे जावास्क्रिप्ट में अपना कोड दोबारा लिखा है। मूल कार्यक्षमता नहीं बदला है। फिडल: 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 का उपयोग करना अपेक्षित परिणाम (एफएफ 3.6.23, क्रोमियम 14) देता है।

यह बहुत संभावना है कि आपने अपने क्रोम ब्राउज़र पर कैशिंग अक्षम कर दी है। यदि नहीं, तो अपनी प्रदत्त छवि के HTTP headers देखें (Cache-control मौजूद है?)। यह हेडर Google नमूना

पर मौजूद है यदि आप यह जानना चाहते हैं कि कोई छवि लोड होने पर (नहीं) लोड हो गई है, तो this question पर एक नज़र डालें।

+0

मैंने कैश सक्षम किया है और कैश-नियंत्रण मौजूद नहीं है। मैं क्या जानना चाहता हूं कि छवि को तुरंत लोड करना है या नहीं (कैश से) या यह क्रमशः लोड हो जाता है। मेरे द्वारा पोस्ट किया गया कोड एफएफ पर ठीक काम करता है लेकिन यह क्रोम पर कभी काम नहीं करता है। – user979390

+0

@ user979390 मैंने एक वर्किंग टेस्ट केस शामिल किया है। Http://jsfiddle.net/EmjQG/2/ देखें। –

+0

क्या यह क्रोम पर भी "सत्य - झूठा" देता है? मेरे लिए यह हमेशा झूठा लौटाता है - क्रोम पर झूठा, मुझे लगता है कि सबसे अच्छा क्रॉस ब्राउज़र समाधान छवि लोड के समय के लिए काउंटर सेट करना होगा। – user979390

संबंधित मुद्दे

 संबंधित मुद्दे