如何使用Javascript每秒加载图像[重复]答案

【问题标题】：How to load an image every second using Javascript [duplicate]如何使用Javascript每秒加载图像[重复]
【发布时间】：2018-01-07 21:10:47
【问题描述】：

我用 HTML/PHP/Javascript 编写了一个网站，它必须每秒显示存储在 MySQL 数据库中的数据。它将其显示为图形（运行 graph.php 生成的 PNG 图像）。

<!DOCTYPE html>

<html>
	<title>Live Tracking Run'INSA</title>
	
	<head>
		<script type = "text/javascript">
			function refresh() {
				document.getElementById('graph').src = 'graph.php';
			}
		</script>
	</head>

	<p><h2>Visualisation des données</h2></p>
	
	<body onLoad='setInterval(refresh, 1000);'>
		<img id='graph'/>
	</body>
	
</html>

visualiser.php 可以很好地显示图形，但 graph.php 没有按预期更新最后一个。

PS：图表（使用 pChart 库制作）也显示了心率随时间的变化。

【问题讨论】：

附带说明，您应该修复您的 HTML 结构。基本上<head> 和<body> 应该是<html> 的唯一直系子级。因此，将<title> 放入<head> 和所有视觉元素，例如<p><h2>... 在您的<body> 中：o)

标签： javascript php phpgraphlib

【解决方案1】：

基本上看起来不错。我怀疑图像没有被更新，因为src 在您设置第二次、第三次等时没有更改。您可以在设置之前清除它：

function refresh() {
    var graph = document.getElementById('graph');
    graph.src = '';
    graph.src = 'graph.php';
}

...或者通过附加查询字符串给它一个不断变化的 URL：

function refresh() {
    document.getElementById('graph').src = 'graph.php?' + Date.now();
}

【讨论】：

看这个例如w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb 不需要将src设置为null
太棒了！第二种解决方案效果很好！非常感谢！！
@jasinthpremkumar：这是在两个不同值之间切换 src。这里的 OP 只是每秒重新声明相同的 src 。这就是为什么在这种情况下将src 设置为''（而不是null）可能会有所帮助（取决于缓存设置；可能还需要将其设置为''，然后等待将其设置为其他值直到之后setTimeout(..., 0)，但查询字符串解决方案使得这样做没有必要）。