Refresh image with a new one at the same url

image, javascript, refresh, url

Solution

What I ended up doing was having the server map any request for an image at that directory to the source that I was trying to update. I then had my timer append a number onto the end of the name so the DOM would see it as a new image and load it.

E.g.

http://localhost/image.jpg
//and
http://localhost/image01.jpg

will request the same image generation code but it will look like different images to the browser.

var newImage = new Image();
newImage.src = "http://localhost/image.jpg";
var count = 0;
function updateImage()
{
    if(newImage.complete) {
        document.getElementById("theText").src = newImage.src;
        newImage = new Image();
        newImage.src = "http://localhost/image/id/image" + count++ + ".jpg";
    }
    setTimeout(updateImage, 1000);
}

Problem

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?

Original source

Related problems