重新加载图像而不刷新页面

Question

使用Javascript:

function atualiza() {
  document.getElementById('badge').innerHTML = location.reload();
}

我知道"location.reload()"会刷新页面......

HTML:

<img id="badge" src="<?php echo $cms_url; ?>/imaging/badge.php?badge=$mygroup['badge']; ?>" />

我需要刷新src=""或<img />不刷新页面.

Answer 1

请参阅:更新图片而不重新加载页面

document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();

无论如何,这被复制了该线程,显然它应该重新加载图像.

Answer 2

将您的img标记更改为:

<img id="badge" src="$cms_url/imaging/badge.php?badge=$mygroup['badge']; ?>">/imaging/badge.php?badge=<?php echo $mygroup['badge']; ?>" />

然后你可以使用下面的代码来点击按钮,锚点或其他任何东西来改变你的图像来源:

document.getElementById("badge").src="new image src here";

你也可以使用jQuery:

$("#badge").attr("src", "new image src here");

Answer 3

也许我写的 javascript 对阅读这个问题的人很有用。它为每个图像添加时间戳以破坏浏览器缓存：

<script type="text/javascript">  

    function replaceSrc()
    {

        var images = document.getElementsByTagName('img');

        for(var i = 0; i < images.length; i++)
        {
            var dt = new Date();
            var img = images[i];

            if(img.src.length >= 0 & img.id != 'idImageNoTimestamp')
            {
                img.src = img.src + "?" + dt.getTime();
                //javascript:alert(document.lastModified);
            }
        }
    }
    replaceSrc();
      </script>

您可以使用 id 属性排除一些图像。我用它来排除谷歌静态地图图像。如果您不需要它，请删除：

 & img.id != 'idImageNoTimestamp'