重新加载图像而不刷新页面
Posted
技术标签:
【中文标题】重新加载图像而不刷新页面【英文标题】:Reload image without refreshing the page 【发布时间】:2014-02-14 20:50:35 【问题描述】: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 />
。
【问题讨论】:
为什么要使用元素作为属性的值? 我不知道该怎么做...右边应该是 之前的 ? 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/
【讨论】:
这与原问题无关。以上是关于重新加载图像而不刷新页面的主要内容,如果未能解决你的问题,请参考以下文章