我改进了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>

这个答案基于上面的几个答案，但将它们稍加统一和简化，并将答案转换为JavaScript函数。

function refreshCachedImage(img_id) {
    var img = document.getElementById(img_id);
    img.src = img.src; // trick browser into reload
};

我需要解决动画svg在第一次玩完后不能重新启动的问题。

这个技巧也适用于其他媒体，如音频和视频。

在创建新图像之后，是否从DOM中删除旧图像并用新图像替换它?

您可以在每次updateImage调用时抓取新图像，但不将它们添加到页面。

有很多方法可以做到这一点。像这样的东西是可行的。

function updateImage()
{
    var image = document.getElementById("theText");
    if(image.complete) {
        var new_image = new Image();
        //set up the new image
        new_image.id = "theText";
        new_image.src = image.src;           
        // insert new image and remove old
        image.parentNode.insertBefore(new_image,image);
        image.parentNode.removeChild(image);
    }

    setTimeout(updateImage, 1000);
}

在得到工作后，如果仍然有问题，它可能是缓存问题，就像其他答案谈论。

下面的代码用于在单击按钮时刷新图像。

function reloadImage(imageId) {
   imgName = 'vishnu.jpg'; //for example
   imageObject = document.getElementById(imageId);
   imageObject.src = imgName;
}

<img src='vishnu.jpg' id='myimage' />

<input type='button' onclick="reloadImage('myimage')" />

简单的解决方案:在响应中添加以下报头:

Cache-control: no-store

为什么这样做是清楚地解释在这个权威的页面:https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

这也解释了为什么无缓存不能工作。

其他答案并不适用，因为:

cache .delete是关于您可以为脱机工作创建的新缓存，请参阅:https://web.dev/cache-api-quick-guide/

在URL中使用#的片段不起作用，因为#告诉浏览器不要向服务器发送请求。

一个随机添加到url的缓存破坏者可以工作，但也会填满浏览器缓存。在我的应用程序中，我想每隔几秒钟从网络摄像头下载一张5mb的图片。完全冻结你的电脑只需要一个小时或更少的时间。我仍然不知道为什么浏览器缓存不限制在一个合理的最大值，但这绝对是一个缺点。

我有一个要求:1)不能添加任何?var=xx的图像2)它应该跨域工作

我真的很喜欢这个答案中的第4个选项，但是:

它在可靠地跨域工作方面存在问题(并且需要修改服务器代码)。

我的捷径是:

创建隐藏iframe 加载当前页面到它(是的，整个页面) iframe.contentWindow.location.reload(真正的); 重新设置图像源为其本身

在这里

function RefreshCachedImage() {
    if (window.self !== window.top) return; //prevent recursion
    var $img = $("#MYIMAGE");
    var src = $img.attr("src");
    var iframe = document.createElement("iframe");
    iframe.style.display = "none";
    window.parent.document.body.appendChild(iframe);
    iframe.src = window.location.href;
    setTimeout(function () {
        iframe.contentWindow.location.reload(true);
        setTimeout(function () {
            $img.removeAttr("src").attr("src", src);
        }, 2000);
    }, 2000);
}

我知道，setTimeout。您必须将其更改为适当的onload-events。