在同一个网址刷新图片 [英] 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屋!