javascript - 用相同的网址刷新一张新图片(Refresh image with a new one at the same url)

Question

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:(FireFox看到的标题：) 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?(有任何想法吗？)   ask by QueueHammer translate from so

Answer 1

Try adding a cachebreaker at the end of the url:(尝试在网址末尾添加一个cachebreaker：)

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.(创建图像时，这将自动附加当前时间戳，这将使浏览器再次查找该图像，而不是在缓存中检索该图像。)