Comment actualiser dynamiquement une image à partir de la même URL sans mise en cache du navigateur ?

Comment actualiser dynamiquement une image à la même URL

Vous rencontrez un problème lorsqu'une image de votre site est accessible via un lien et actualisée avec une nouvelle image à chaque fois que vous accédez au lien. Cependant, lorsque vous chargez l'image en arrière-plan et tentez de la mettre à jour sur la page, elle reste inchangée, même si elle s'actualise lors du rechargement de la page.

Le problème réside dans la mise en cache du navigateur. Par défaut, les navigateurs mettent en cache les images pour améliorer les temps de chargement. Par conséquent, lorsque vous essayez de mettre à jour l'image, le navigateur affiche simplement la version mise en cache au lieu de récupérer la nouvelle image.

Solution : utiliser des cachebreakers

Pour forcer le navigateur pour télécharger la dernière image, vous pouvez ajouter un disjoncteur de cache à l'URL de l'image. Cela se fait généralement en ajoutant l'horodatage actuel, garantissant que le navigateur voit la demande comme une URL unique.

Dans votre code JavaScript :

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

En ajoutant ce briseur de cache, vous forcez le navigateur pour récupérer l'image directement depuis le serveur, en contournant efficacement le cache. Cela garantit que la dernière version de l'image est toujours affichée sur la page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!