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

Posted

技术标签:

【中文标题】重新加载图像而不刷新页面【英文标题】:Reload image without refreshing the page 【发布时间】:2014-02-14 20:50:35 【问题描述】:

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=""&lt;img /&gt;

【问题讨论】:

为什么要使用元素作为属性的值? 我不知道该怎么做...右边应该是 之前的 ? Refresh image with a new one at the same url的可能重复 【参考方案1】:

为什么需要这样做?

<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']; ?>">

【讨论】:

这应该是评论而不是答案【参考方案2】:

看到这个:Updating a picture without page reload

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

无论如何,这是从该线程复制的,显然它应该重新加载图像。

【讨论】:

【参考方案3】:

将您的 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");

【讨论】:

如果图像要使用相同的 src 并且服务器将提供另一个图像怎么办【参考方案4】:

也许我写的 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'

【讨论】:

我喜欢这个,但如果你想在一个只重新加载部分的页面中使用它,它需要是img.src = img.src.split("?")[0] + "?" + dt.getTime();【参考方案5】:

对于 AngularJs,我们可以像这样直接在 html 文件中添加:

HTML:

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

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

你可以看看这个:https://jsfiddle.net/k614L8tt/

【讨论】:

这与原问题无关。

以上是关于重新加载图像而不刷新页面的主要内容,如果未能解决你的问题,请参考以下文章

以角度刷新下拉列表而不重新加载页面

仅使用 jQuery/Ajax 刷新表的值而不重新加载页面

提交按钮后如何重新加载谷歌recaptcha而不刷新页面? [复制]

刷新 JSP 变量而不重新加载页面

刷新数据表而不重新加载页面

JQuery AJAX 发布和刷新页面内容而不重新加载页面