Verifica se l'immagine è caricata dalla cache o no

Question

Ho un compito. Ho una chiamata al server per ottenere l'elenco delle immagini. Insieme ad altre informazioni devo aggiungere questa informazione che è stata caricata dalla cache o dal server.

C'è un modo per controllare le intestazioni nella chiamata API? Se proviene dalla cache ottengo il codice di stato 200 ma ottengo informazioni extra come questa (dalla cache). Se non lo è dalla cache ho solo codice di stato 200.

Immagine 1 è per il coloro che non è caricato dalla cache

L'immagine successiva è per coloro che vengono caricati dalla cache.

Ho capito che la risposta è già stata data o è duplicata. Ho provato questa soluzione e non sembra funzionare. Inoltre è specifico per Chrome, sto cercando qualcosa di più generale che dovrebbe funzionare in tutti i browser. Spero che questo spieghi perché non sono andato per quella soluzione. L'ho cercato prima di chiedere qui.

In attesa di risposte.

Answer 1

Sarà necessario gestire i collegamenti di carico in modo selettivo. È possibile verificare il carico testando la proprietà dell'oggetto Image complete.

Ad esempio:

$('.images_to_load').each(function(index, elem) 
{ 
    if (!elem.complete) { 
     $(elem).on('load', function(){ 
      console.log('image loaded from server'); 
     }); 
    } 
    else { 
     console.log('image loaded from cache'); 
    } 
}); 

Come per utilizzare questo codice: E 'importante che avete i tag di immagine (senza l'attributo src) con classe images_to_load sulla tua pagina quando si esegue sopra il codice. Dopo aver aggiunto l'attributo src (l'url) sarai in grado di scoprire se un'immagine è stata caricata dalla cache o meno.