Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Refresh image with a new one at the same url

I am accessing a link on my site that will provide a new image each time it is accessed.

The issue I am running into is that if I try to load the image in the background and then update the one on the page, the image doesn't change--though it is updated when I reload the page.

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); } 

Headers as FireFox sees them:

HTTP/1.x 200 OK Cache-Control: no-cache, must-revalidate Pragma: no-cache Transfer-Encoding: chunked Content-Type: image/jpeg Expires: Fri, 30 Oct 1998 14:19:41 GMT Server: Microsoft-HTTPAPI/1.0 Date: Thu, 02 Jul 2009 23:06:04 GMT 

I need to force a refresh of just that image on the page. Any ideas?

like image 200
QueueHammer Avatar asked Jul 02 '09 22:07

QueueHammer


People also ask

How to refresh image in JavaScript?

To refresh the image in JavaScript, we can simply select the img element and modify its src attribute to be that of the target image, along with the timestamp parameter to ensure it does not access it from the cache.

How do you refresh an image tag in HTML?

newImage. src = "http://localhost/image.jpg?" + new Date(). getTime(); This will append the current timestamp automatically when you are creating the image, and it will make the browser look again for the image instead of retrieving the one in the cache.

How do I automatically refresh part of an HTML page?

Refreshing part of a page periodically You can use the frame “reload” function periodically in frameset page itself. In the above code, “right_frame” reloads every second. setInterval() function is very closely related to setTimeout() – both have similar syntax: setInterval ( expression, interval );


1 Answers

Try adding a cachebreaker at the end of the url:

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

This will append the current timestamp automatically when you are creating the image, and it will make the browser look again for the image instead of retrieving the one in the cache.

like image 52
Paolo Bergantino Avatar answered Sep 20 '22 12:09

Paolo Bergantino