web-dev-qa-db-fra.com

comment effacer ou remplacer une image en cache

Je sais qu'il existe de nombreuses façons d'empêcher la mise en cache des images (par exemple, via les balises META), ainsi que quelques astuces pour vous assurer que la version actuelle d'une image est affichée à chaque chargement de la page (telle que image.jpg? X = timestamp ), mais existe-t-il un moyen d'effacer ou de remplacer une image dans la mémoire cache du navigateur de sorte qu'aucune des méthodes ci-dessus ne soit nécessaire?

Par exemple, disons qu'il y a 100 images sur une page et que ces images sont nommées "01.jpg", "02.jpg", "03.jpg", etc. Si l'image "42.jpg" est remplacée, y a-t-il moyen de la remplacer dans le cache pour que "42.jpg" affiche automatiquement la nouvelle image lors du chargement de page successif? Je ne peux pas utiliser la méthode de balise META, car j'ai besoin de savoir que ISN "T remplacé pour rester mis en cache, et je ne peux pas utiliser la méthode timestamp, car je ne veux pas que TOUTES les images soient rechargées à chaque fois que la page charges.

Je me suis creusé la tête et parcouru Internet pour trouver un moyen de le faire (de préférence via javascript), mais sans succès. Aucune suggestion?

javascriptimagecachingreplace
31
tallvanilla

Si vous écrivez la page de manière dynamique, vous pouvez ajouter l'horodatage modifié en dernier à l'URL:

<img src="image.jpg?lastmod=12345678" ...

48
Greg

<meta> est absolument sans importance. En fait, vous ne devriez pas essayer de l'utiliser pour contrôler le cache (au moment où quoi que ce soit lit le contenu du document, il est déjà mis en cache).

Dans HTTP, chaque URL est indépendante. Quoi que vous fassiez au document HTML, cela ne s'appliquera pas aux images.

Pour contrôler la mise en cache, vous pouvez modifier les URL chaque fois que leur contenu change. Si vous mettez à jour des images de temps en temps, autorisez leur mise en cache pour toujours et utilisez un nouveau nom de fichier (avec une version, un hachage ou une date) pour la nouvelle image - c'est la meilleure solution pour les fichiers de longue durée.

Si votre image change très souvent (toutes les quelques minutes, voire à chaque requête), envoyez alors Cache-control: no-cache ou Cache-control: max-age=xxoù xx est le nombre de secondes au cours duquel cette image est "fraîche".

Une URL aléatoire pour les fichiers de courte durée est une mauvaise idée. Il pollue les caches avec des fichiers inutiles et oblige les fichiers utiles à être purgés plus tôt.

Si vous avez Apache et mod_headers ou mod_expires, créez un fichier .htaccess avec les règles appropriées.

<Files ~ "-nocache\.jpg">
   Header set Cache-control "no-cache"
</Files>

Ci-dessus rendra les fichiers *-nocache.jpg non cachables.

Vous pouvez aussi servir des images via le script PHP (elles ont une cachabilité terrible par défaut;)

11
Kornel

Ajouter l'URL de l'image comme ceci 

"image1.jpg?" + DateTime.Now.ToString ("ddMMyyyyhhmmsstt");

Il suffit d'ajouter une chaîne aléatoire dans la chaîne de requête

Je vous remercie

Raju Jetla

11
Raju Jetla

Contrairement à ce que certaines autres réponses ont dit, EST un moyen pour le javascript côté client de remplacer une image en cache. L'astuce consiste à créer un <iframe> masqué, à définir son attribut src sur l'URL de l'image, à attendre son chargement, puis à le recharger de force en appelant location.reload(true). Cela mettra à jour la copie en cache de l'image. Vous pouvez alors remplacer les éléments <img> sur votre page (ou recharger votre page) pour voir la version mise à jour de l'image.

(Petite mise en garde: si vous mettez à jour des éléments <img> individuels, et s'il y en a plusieurs ayant l'image mise à jour, vous devez les effacer ou les supprimer TOUT, puis les remplacer ou les réinitialiser. Si vous le faites un par un Premièrement, certains navigateurs copieront la version en mémoire de l’image à partir d’autres balises. Vous risquez donc de ne pas voir votre image mise à jour, alors même qu’elle se trouve dans le cache).

J'ai posté du code pour faire ce genre de mise à jour ici .

8
Doin

Je suis sûr que la plupart des navigateurs respectent l'en-tête Last-Modified HTTP. Envoyez-les et demandez une nouvelle image. Il sera mis en cache par le navigateur si la ligne Dernière modification ne change pas.

5
strager

Vous pouvez ajouter un nombre aléatoire à l'image, ce qui revient à lui attribuer une nouvelle version. J'ai mis en œuvre une logique similaire et cela fonctionne parfaitement.

<script>
var num = Math.random();
var imgSrc= "image.png?v="+num;
$(function() {
$('#imgID').attr("src", imgSrc);
})
</script>
4
abhiagNitk

Si l’on utilise l’astuce? X = timestamp, c’est parce que c’est la seule façon de le faire image par image. Cela ou génère dynamiquement des noms d’image et pointe vers une application qui produit l’image.

Je vous suggère de déterminer, côté serveur, si l'image a été modifiée/mise à jour, et si c'est le cas, indiquez votre tag avec l'astuce? X = timestamp pour forcer la nouvelle image.

1
TravisO

Voir http://en.wikipedia.org/wiki/URI_scheme

Notez que vous pouvez fournir un nom d'utilisateur unique: password @ combo en tant que préfixe de la partie domaine de l'URI. Lors de mes expériences, j'ai constaté que l'inclusion de cette information avec un faux ID (ou un faux mot de passe, je suppose) rendait la ressource unique, ce qui annulait la mise en cache à votre guise.

Utilisez simplement un horodatage comme nom d'utilisateur et, autant que je sache, le serveur ignore cette partie de l'URI tant que l'authentification n'est pas activée.

Btw - Je ne pouvais pas non plus utiliser les astuces ci-dessus avec un problème de mise en cache de l'icône de marqueur de carte Google où je me trouvais alors que l'astuce? Param = timestamp fonctionnait, mais qui posait des problèmes de disparition des superpositions. Jamais pu comprendre pourquoi cela se passait, mais jusqu'ici tout va bien en utilisant cette méthode. Ce que je ne sais pas, c'est si le fait de transmettre de fausses informations d'identification aura des effets négatifs sur les performances du serveur. Si quelqu'un sait, je serais intéressé de savoir, car je ne suis pas encore en production à grand volume.

S'il vous plaît rapporter vos résultats.

1
Inator

Non, il est impossible de forcer la suppression d'un fichier dans le cache du navigateur, que ce soit par le serveur Web ou par tout ce que vous pouvez mettre dans les fichiers qu'il envoie. Le cache du navigateur appartient au navigateur et est contrôlé par l'utilisateur.

Par conséquent, vous devez traiter chaque fichier et chaque URL comme une ressource précieuse qui doit être gérée avec soin.

Par conséquent, la suggestion de porneL de versionner les fichiers d’image semble être la meilleure réponse à long terme. L’ETAG est utilisé dans des circonstances normales, mais peut-être que vos efforts l’ont annulé? Essayez de changer l'ETAG, comme suggéré.

0
Rob Williams

Je fais habituellement la même chose que @Greg nous a dit, et j'ai une fonction pour ça:

function addMagicRefresh(url)
{
    var symbol = url.indexOf('?') == -1 ? '?' : '&';
    var magic = Math.random()*999999;
    return url + symbol + 'magic=' + magic;
}

Cela fonctionnera puisque votre serveur l’accepte et que vous n’utilisez pas le paramètre "magique" de toute autre manière.

J'espère que ça aide.

0
Wagner Bertolini Junior

Modifiez l'ETAG pour l'image.

0
StingyJack

essayez les solutions ci-dessous,

myImg.src = " http: //localhost/image.jpg ?" + new Date (). getTime ();

Les solutions ci-dessus fonctionnent pour moi :)

0
Rakesh Chaudhari

Lorsque vous modifiez le nom de fichier de l'image n'est pas une option, utilisez une variable de session côté serveur et une fonction javascript window.location.reload(). Comme suit:

Après le téléchargement terminé: 

Session("reload") = "yes"

Sur page_load: 

If Session("reload") = "yes" Then
    Session("reload") = Nothing
    ClientScript.RegisterStartupScript(Me.GetType), "ReloadImages", "window.location.reload();", True)
End If

Cela permet au navigateur client de ne s'actualiser qu'une seule fois car la variable de session est réinitialisée après une occurrence.

J'espère que cela t'aides.

0
Pete

Pour remplacer le cache de pictore, vous pouvez stocker une valeur de version côté serveur et lorsque vous chargez une image, envoyez simplement cette valeur à la place d'horodatage. Lorsque votre image sera modifiée, changez sa version.

0
ikryvorotenko

Dans le cas où une image est réimportée, existe-t-il un moyen d'effacer ou de remplacer l'image précédemment mise en cache côté client? Dans mon exemple ci-dessus, le but est de faire en sorte que le navigateur oublie ce que "42.jpg" est

Vous utilisez Firefox, n'est-ce pas?

  • Trouver le menu Tools
  • Sélectionnez Clear Private Data
  • Décochez toutes les cases sauf assurez-vous que Cache est coché
  • Appuyer sur OK

:-)

Sérieusement, je n'ai jamais entendu parler d'une telle chose, et je doute qu'il existe une API. Je ne peux pas imaginer que ce soit une bonne idée de la part des développeurs de navigateurs de vous laisser fouiller dans leur cache, et je ne vois aucune motivation pour qu'ils implémentent jamais une telle fonctionnalité.

JE NE PEUX PAS utiliser la méthode de balise META OR comme méthode timestamp, car je souhaite que toutes les images soient mises en cache dans des circonstances normales.

Pourquoi ne pouvez-vous pas utiliser un horodatage (ou etag, ce qui revient au même)? N'oubliez pas que vous devriez utiliser l'horodatage du fichier image lui-même , pas seulement Time.Now.
Je n'aime pas être porteur de mauvaises nouvelles, mais vous n'avez pas d'autre choix.

Si les images ne changent pas, l'horodatage ne changera pas non plus, ainsi tout sera mis en cache "dans des circonstances normales". Si les images changent, elles auront un nouvel horodatage (ce dont elles auront besoin pour des raisons de mise en cache), mais cet horodatage restera valable jusqu'à ce que quelqu'un remplace l'image à nouveau.

0
Orion Edwards

Essayez cet extrait de code:

var url = imgUrl? + Math.random();

Cela garantira que chaque demande est unique, vous obtiendrez toujours la dernière image.

0
Akbar Badhusha