Pourquoi mon image chargée dynamiquement ne se met-elle pas à jour sans recharger la page ?

Dépannage : l'image ne se met pas à jour dynamiquement

Lorsque vous accédez à un lien qui fournit une nouvelle image à chaque fois qu'elle est demandée, vous pouvez rencontrer un problème où une image chargée dans le l'arrière-plan ne se met pas à jour sur la page à moins que vous ne rechargez la page.

Le code ci-dessous illustre le problème :

var newImage = new Image();
newImage.src = "http://localhost/image.jpg";

function updateImage()
{
    if(newImage.complete) {
        document.getElementById("theText").src = newImage.src;
        newImage = new Image();
        number++;
        newImage.src = "http://localhost/image/id/image.jpg?time=" + new Date();
    }

    setTimeout(updateImage, 1000);
}

Dans ce scénario, l'image n'est pas mise à jour sur la page même si les en-têtes de requête indiquent que la mise en cache est désactivée :

HTTP/1.x 200 OK
Cache-Control: no-cache, must-revalidate
Pragma: no-cache

Solution : Cachebreaker

Pour forcer un rafraîchissement de l'image, ajoutez un cachebreaker à la fin du URL :

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

En ajoutant l'horodatage actuel, vous vous assurez que le navigateur récupérera l'image du serveur au lieu d'utiliser la version mise en cache. Cette technique permettra à l'image de se mettre à jour dynamiquement sur la page comme prévu.

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!