Existe-t-il une méthode côté client pour empêcher la mise en cache d'une image?

Question

Est-il possible de contrôler avec javascript si un navigateur va sur le serveur pour une image ou dans le cache du navigateur? Puis-je forcer le navigateur à faire un appel de serveur alors qu'il utiliserait une image mise en cache? Je sais que je peux simplement ajouter une chaîne de requête à mon URL d'image, mais, si je comprends bien, cela fonctionne parce que le navigateur voit cela comme une nouvelle image. Je veux que l'ancienne image soit remplacée dans le cache.

Answer 1

Vous ne pouvez rien faire de pareil avec une étiquette standard img. Vous pouvez créer une XMLHttpRequest pour l'image et définir l'en-tête if-modified-since. Cela devrait remplacer l'ancienne image dans le cache:

var url = "http://www.mysite.com/images/myimage.png"; 
var xhr = new XMLHttpRequest(); // or x-browser compat function 
xhr.open("GET", url, true); 
xhr.setRequestHeader("If-modified-since", "Thu Jan 1 00:00:00 UTC 1970"); 
xhr.onreadystatechange = function() 
{ 
    if (xhr.readyState == 4 && xhr.status == 200) 
     document.getElementById("myImg").src = url; 
} 
xhr.send(); 

Answer 2

Vous pouvez utiliser des balises meta sur la page pour le cache de contrôle, réglé sur "no-cache" comme ceci:

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"> 

et

<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"> 

Vous pouvez également définir la page « expirer » à un moment dans le passé, ce qui, en théorie, que le navigateur pour vérifier la nouvelle version:

<META HTTP-EQUIV="EXPIRES" value="some date in the past" /> 

Notez que "une certaine date dans le passé" doit être GMT au RFC 1123 format.

note, vous pouvez simplement les envoyer dans l'en-tête HTTP lui-même: See Here

Hope this helps.