使用同一网址的新图片刷新图片 [英] 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);
}

FireFox 看到的标题:

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?

推荐答案

我最终做的是让服务器将对该目录中的任何图像请求映射到我试图更新的源.然后我让我的计时器在名称的末尾附加一个数字，以便 DOM 将其视为新图像并加载它.

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.

例如

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

这篇关于使用同一网址的新图片刷新图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！