我正在访问我的网站上的一个链接,每次访问它都会提供一个新的图像。

我遇到的问题是,如果我试图在后台加载图像,然后更新页面上的图像,图像不会改变——尽管在我重新加载页面时它会更新。

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

我需要强制刷新页面上的图像。什么好主意吗?


当前回答

我改进了AlexMA的脚本,在网页上显示我的摄像头,并定期上传同名的新图像。我有问题,有时图像闪烁,因为一个破碎的图像或不完整(向上)加载的图像。为了防止闪烁,我检查了图像的自然高度,因为我的网络摄像头图像的大小没有改变。只有当加载的图像高度符合原始图像高度时,完整的图像才会显示在页面上。

  <h3>Webcam</h3>
  <p align="center">
    <img id="webcam" title="Webcam" onload="updateImage();" src="https://www.your-domain.com/webcam/current.jpg" alt="webcam image" width="900" border="0" />

    <script type="text/javascript" language="JavaScript">

    // off-screen image to preload next image
    var newImage = new Image();
    newImage.src = "https://www.your-domain.com/webcam/current.jpg";

    // remember the image height to prevent showing broken images
    var height = newImage.naturalHeight;

    function updateImage()
    {
        // for sure if the first image was a broken image
        if(newImage.naturalHeight > height)
        {
          height = newImage.naturalHeight;
        }

        // off-screen image loaded and the image was not broken
        if(newImage.complete && newImage.naturalHeight == height) 
        {
          // show the preloaded image on page
          document.getElementById("webcam").src = newImage.src;
        }

        // preload next image with cachebreaker
        newImage.src = "https://www.your-domain.com/webcam/current.jpg?time=" + new Date().getTime();

        // refresh image (set the refresh interval to half of webcam refresh, 
        // in my case the webcam refreshes every 5 seconds)
        setTimeout(updateImage, 2500);
    }

    </script>
</p>

其他回答

一种解决方法是像建议的那样笨拙地添加一些get查询参数。

更好的答案是在HTTP报头中发出两个额外的选项。

Pragma: no-cache
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Cache-Control: no-cache, must-revalidate

通过提供过去的日期,它不会被浏览器缓存。缓存控制是在HTTP/1.1中添加的,必须重新验证标签表明代理永远不应该提供旧的映像,即使是在可减轻的情况下,而Pragma: no-cache对于当前的现代浏览器/缓存来说并不是真正必要的,但可能有助于一些复杂的破碎的旧实现。

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

函数reloadImage (imageId) { path =' ../showImage.php?cache=';/ /例如 imageObject = document.getElementById(imageId); imageObject。src = path + (new Date()).getTime(); } <img src='../showImage.php' id='myimage' /> < br / > <input type='button' onclick="reloadImage('myimage')"/>

我通过servlet将数据发送回来解决了这个问题。

response.setContentType("image/png");
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache, must-revalidate");
response.setDateHeader("Expires", 0);

BufferedImage img = ImageIO.read(new File(imageFileName));

ImageIO.write(img, "png", response.getOutputStream());

然后从页面中给它一个带有一些参数的servlet,以获取正确的图像文件。

<img src="YourServlet?imageFileName=imageNum1">

在同一位置放置图像的第二个副本,然后删除原始图像。

function refreshImg(ele){
    ele.insertAdjacentHTML('beforebegin',ele.outerHTML);
    ele.parentNode.removeChild(ele);
}

这将有效地刷新图像。

Crossbrowser。insertAdjacentHTML, outerHTML, parentNode和removecchild都是跨浏览器的。

在大多数情况下,性能损失几乎可以忽略不计。@Paolo Bergantino的答案可能比这个函数更好。使用他的答案,只有一个DOM元素受到影响。这个函数有两个元素。