在创建新图像之后，是否从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);
}

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

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

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

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

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

作为……的替代方案。

newImage.src = "http://localhost/image.jpg?" + new Date().getTime();

.．.看来……

newImage.src = "http://localhost/image.jpg#" + new Date().getTime();

.．.足以欺骗浏览器缓存而不绕过任何上游缓存，假设您返回了正确的cache - control头。虽然你可以用…

Cache-Control: no-cache, must-revalidate

.．.你就失去了If-Modified-Since或If-None-Match标头的好处，所以…

Cache-Control: max-age=0, must-revalidate

.．.应该防止浏览器重新下载整个图像，如果它实际上没有改变。在IE, Firefox和Chrome上进行测试和工作。令人恼火的是，它在Safari上失败了，除非你使用…

Cache-Control: no-store

.．.尽管这可能比用数百个相同的映像填充上游缓存更可取，特别是当它们运行在您自己的服务器上时。: -)

更新(2014-09-28):现在看起来像是Cache-Control: Chrome也需要no-store。

我有一个要求: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。

尝试在url的末尾添加cachebreaker:

newImage.src = "http://localhost/image.jpg?" + new Date().getTime();

这将在创建图像时自动附加当前时间戳，并且它将使浏览器重新查找图像，而不是从缓存中检索图像。

不需要新的Date(). gettime()恶作剧。你可以通过使用jQuery .load()创建一个不可见的虚拟图像来欺骗浏览器，然后每次创建一个新的图像:

<img src="" id="dummy", style="display:none;" />  <!-- dummy img -->
<div id="pic"></div>

<script type="text/javascript">
  var url = whatever;
  // You can repeat the following as often as you like with the same url
  $("#dummy").load(url);
  var image = new Image();
  image.src = url;
  $("#pic").html("").append(image);
</script>