Home >Web Front-end >JS Tutorial >Why Isn't My Dynamically Loaded Image Updating Without a Page Reload?
When accessing a link that provides a new image each time it is requested, you may encounter an issue where an image loaded in the background fails to update on the page unless you reload the page.
The code below illustrates the issue:
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); }
In this scenario, the image is not updated on the page even though the request headers indicate that caching is disabled:
HTTP/1.x 200 OK Cache-Control: no-cache, must-revalidate Pragma: no-cache
Solution: Cachebreaker
To force a refresh of the image, add a cachebreaker to the end of the URL:
newImage.src = "http://localhost/image.jpg?" + new Date().getTime();
By appending the current timestamp, you ensure that the browser will retrieve the image from the server instead of using the cached version. This technique will allow the image to update dynamically on the page as expected.
The above is the detailed content of Why Isn't My Dynamically Loaded Image Updating Without a Page Reload?. For more information, please follow other related articles on the PHP Chinese website!