刷新页面而不刷新页面的情况下重新加载图像

Question

Javascript:

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 />。

- jcsantos

---

你为什么要将元素用作属性的值？ - Ram

我不知道该怎么做...正确的方式是在<img>之前加一个<div>吗？ - jcsantos

可能是使用相同URL刷新图像的重复问题。 - Jon Onstott

Answer 1

看这个：不刷新页面更新图片

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

无论如何，这是从那个帖子复制过来的，显然它应该重新加载图片。

- Kevin

---

谢谢，你帮我省了好几个小时的调试时间。 - B. Okba

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");

- Felix

---

如果图像将使用相同的src，但服务器会提供另一张图片，该怎么办？ - SDIDSA

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属性来排除某些图像，我用它来排除Google静态地图图像。如果您不需要它，请将其删除：

 & img.id != 'idImageNoTimestamp'

- Aurora

---

我喜欢这个，但如果你想要它在只重新加载需要的部分的页面中，那么它应该是 img.src = img.src.split("?")[0] + "?" + dt.getTime();。 - Dolphin

Answer 4

对于AngularJs，我们可以直接在HTML文件中添加如下代码：

HTML:

<div ng-controller="MyCtrl1"><div ng-repeat="img in images"> <img ng-src="{{img.image}}?_={{generatingNewDate}}"></div></div>

Ctrl: $scope.generatingNewDate = new Date().getTime();

您可以查看此链接：https://jsfiddle.net/k614L8tt/

- yaqub

---

这与原问题无关。 - Derek Brown

Answer 5

你为什么需要这样做？

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

当你可以这样做时

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

- user2672373

---

这应该是一个注释而不是答案。 - Daniel Wu