如何用JavaScript每秒加载图片？PHP生成MySQL图表不更新求助

AI 小北

2026-5-15

解决实时刷新pChart生成的心率图表问题

嘿，我来帮你搞定这个图表不更新的麻烦！咱们先拆解问题，再一步步解决：

问题根源：浏览器缓存在“偷懒”

你当前的代码确实每秒都在设置图片的src，但浏览器会把第一次加载的graph.php生成的PNG缓存起来——它觉得这是同一个资源，就直接用缓存里的旧图，根本不会去服务器请求新的图表。

三步解决实时刷新问题

1. 给图片URL加“唯一标识”，骗过浏览器缓存

修改你的JavaScript函数，每次请求时给graph.php加一个时间戳参数，让浏览器认为这是全新的资源：

function refresh() {
  // 用当前时间戳作为唯一参数，确保每次URL都不一样
  const uniqueParam = new Date().getTime();
  document.getElementById('graph').src = `graph.php?t=${uniqueParam}`;
}

这样每次请求的URL都是graph.php?t=1699999999、graph.php?t=1700000000这种独一无二的地址，浏览器就会乖乖去服务器拿新图表了。

2. 让`graph.php`禁用服务器/浏览器缓存

光前端改还不够，还要确保graph.php本身不会被服务器或浏览器缓存。在你的graph.php最开头加上这些HTTP头：

<?php
// 强制禁用所有缓存机制
header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1标准
header("Pragma: no-cache"); // 兼容HTTP 1.0
header("Expires: 0"); // 告诉代理服务器不要缓存

// 下面是你的pChart生成代码（比如连接MySQL、查询心率数据、生成图表的逻辑）
?>

这些头会明确告诉浏览器和服务器：这个资源绝对不能缓存，每次都要重新生成。

3. 优化HTML结构（可选但推荐）

你原来的HTML里有个小问题：<p><h2>...</h2></p>不符合HTML规范（块级元素<h2>不能放在<p>里），同时用window.addEventListener替代onLoad属性更符合现代前端写法：

<!DOCTYPE html>
<html>
<head>
  <title>Live Tracking Run'INSA</title>
  <script type="text/javascript">
    function refresh() {
      const uniqueParam = new Date().getTime();
      document.getElementById('graph').src = `graph.php?t=${uniqueParam}`;
    }

    // 页面完全加载后启动每秒刷新
    window.addEventListener('load', function() {
      setInterval(refresh, 1000);
    });
  </script>
</head>
<body>
  <h2>Visualisation des données</h2>
  <img id='graph' alt="心率随时间变化曲线"/>
</body>
</html>

验证步骤

先手动访问graph.php?t=随便输个数字，确认页面显示的是最新的心率数据图表；
打开你的visualiser.php，观察图表是否每秒更新一次；
如果还是有问题，检查浏览器控制台（F12）的网络请求，看每次刷新时是否有新的graph.php请求，且返回的是200状态码（不是304缓存）。

这样应该就能完美实现每秒加载最新的心率图表啦！

内容的提问来源于stack exchange，提问作者monchu

如何用JavaScript每秒加载图片？PHP生成MySQL图表不更新求助

问题根源：浏览器缓存在“偷懒” #

三步解决实时刷新问题 #

1. 给图片URL加“唯一标识”，骗过浏览器缓存 #

2. 让graph.php禁用服务器/浏览器缓存 #

3. 优化HTML结构（可选但推荐） #