2011-10-21 19 views
6

Ho cercato di scoprire se un'immagine esterna viene memorizzato nella cache del browser con js, questo è il codice che ho finora:Utilizzare image.complete per trovare se l'immagine è memorizzata nella cache su chrome?

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

Funziona perfettamente su Firefox, ma restituisce sempre false su bicromato di potassio.

Qualcuno ha qualche idea su come farlo funzionare con chrome?

+0

Perché dovrebbe importare se un asset è memorizzato nella cache? :/ – Matchu

+0

Lo standard W3C non ha alcuna API di questo tipo, quindi è probabile che usiate alcuni hack specifici del browser che non è una buona cosa da fare – Ankur

+0

Anche se l'immagine è memorizzata nella cache, caricare l'immagine è comunque molto probabilmente asincrona, ed è improbabile che il browser abbia completato il caricamento e la visualizzazione dell'immagine prima di eseguire la successiva riga JavaScript. – RoToRa

risposta

13

Ho riscritto il codice in un semplice JavaScript, per renderlo più indipendente su jQuery. La funzionalità principale non è cambiata. Fiddle: 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 

La prima volta, ho capito false and false. Dopo aver eseguito nuovamente il codice, ottengo true and false.


Utilizzando .complete e .height + .width dà i risultati attesi (FF 3.6.23, cromo 14).

È molto probabile che tu abbia disattivato la memorizzazione nella cache sul tuo browser Chrome. In caso contrario, controllare il HTTP headers della vostra immagine servita (È presente Cache-control?). Questa intestazione esiste nel campione Google

Se si desidera rilevare quando un'immagine ha (non) completato il caricamento, dare un'occhiata a this question.

+0

I have cache enabled e Cache-control non è presente. Cosa voglio sapere se sapere se l'immagine viene caricata istantaneamente (dalla cache) o se carica progressivamente. Il codice che ho postato funziona bene su FF ma non funziona mai su Chrome. – user979390

+0

@ user979390 Ho incluso un caso di test di lavoro. Vedi http://jsfiddle.net/EmjQG/2/. –

+0

Ciò restituisce "true - false" anche su chrome? per me restituisce sempre false - false su chrome, suppongo che la migliore soluzione cross browser sia quella di impostare un contatore per il timing del caricamento dell'immagine. – user979390