我正在访问我的网站上的一个链接，每次访问它都会提供一个新的图像。
我遇到的问题是，如果我试图在后台加载图像，然后更新页面上的图像，图像不会改变——尽管在我重新加载页面时它会更新。
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看到的头文件:
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
我需要强制刷新页面上的图像。什么好主意吗?
在同一位置放置图像的第二个副本，然后删除原始图像。
function refreshImg(ele){
ele.insertAdjacentHTML('beforebegin',ele.outerHTML);
ele.parentNode.removeChild(ele);
}
这将有效地刷新图像。
Crossbrowser。insertAdjacentHTML, outerHTML, parentNode和removecchild都是跨浏览器的。
在大多数情况下，性能损失几乎可以忽略不计。@Paolo Bergantino的答案可能比这个函数更好。使用他的答案，只有一个DOM元素受到影响。这个函数有两个元素。
<img src='someurl.com/someimage.ext' onload='imageRefresh(this, 1000);'>
然后在下面的一些javascript
<script language='javascript'>
function imageRefresh(img, timeout) {
setTimeout(function() {
var d = new Date;
var http = img.src;
if (http.indexOf("&d=") != -1) { http = http.split("&d=")[0]; }
img.src = http + '&d=' + d.getTime();
}, timeout);
}
</script>
这个做的是，当图像加载时，安排它在1秒内重新加载。我在不同类型的家庭安全摄像头的页面上使用这个。
I had this same issue using the Unsplash random image feature. The idea of adding a dummy query string to the end of the URL is correct, but in this instance a completely random parameter doesn't work (I tried it). I can imagine it's the same for some other services too, but for unsplash the parameter needs to be sig, so your image URL would be, for example, http://example.net/image.jpg?sig=RANDOM where random is a random string that will NOT be the same when you update it. I used Math.random()*100 but date is suitable too.
您需要这样做，因为如果没有它，浏览器将看到所述路径上的图像已经加载，并将使用缓存的图像来加速加载。
参见https://github.com/unsplash/unsplash-source-js/issues/9
在同一位置放置图像的第二个副本，然后删除原始图像。
function refreshImg(ele){
ele.insertAdjacentHTML('beforebegin',ele.outerHTML);
ele.parentNode.removeChild(ele);
}
这将有效地刷新图像。
Crossbrowser。insertAdjacentHTML, outerHTML, parentNode和removecchild都是跨浏览器的。
在大多数情况下，性能损失几乎可以忽略不计。@Paolo Bergantino的答案可能比这个函数更好。使用他的答案，只有一个DOM元素受到影响。这个函数有两个元素。
