JavaScript/HTML无刷新循环重载图片：Python定时更新图片显示求助

原代码存在的具体问题 #

• 同步死循环while (true)会直接阻塞JavaScript单线程事件循环：浏览器没有空余时间处理网络请求、页面渲染、图片解码等任务，最终触发页面无响应崩溃，完全无法执行实际的图片更新逻辑。
• 调用refreshImage时传入的cameraFeed未加引号：代码会将其识别为未声明的全局变量，直接抛出ReferenceError报错，根本无法匹配到对应的图片DOM元素。
• 缺少间隔控制逻辑：没有在两次图片刷新之间留出执行空隙，就算把同步循环改成异步逻辑，无间隔的高频请求也会快速占满服务器带宽和浏览器网络连接数。

可正常运行的修正实现 #

将同步无限循环替换为带回调的延迟定时器，既保证固定频率更新图片，也不会阻塞页面主线程，参考代码如下：

// 设置图片刷新间隔，单位为毫秒，下方示例为3秒刷新一次
const REFRESH_INTERVAL = 3000;

function refreshImage(imgElementId, imgURL){    
  // 生成时间戳打破浏览器缓存，强制加载最新的图片文件
  const timestamp = new Date().getTime();  
  const imgEl = document.getElementById(imgElementId);  
  const refreshUrl = `${imgURL}?t=${timestamp}`;    

  // 图片加载完成后，安排下一次刷新，避免加载失败导致逻辑中断
  imgEl.onload = () => {
    setTimeout(() => refreshImage(imgElementId, imgURL), REFRESH_INTERVAL);
  };
  // 图片加载异常时，兜底安排下一次刷新，防止刷新流程卡死
  imgEl.onerror = () => {
    setTimeout(() => refreshImage(imgElementId, imgURL), REFRESH_INTERVAL);
  };

  // 触发图片加载
  imgEl.src = refreshUrl;    
}    

// 等待页面DOM元素完全加载后再启动刷新逻辑，避免元素未渲染就发起查询
document.addEventListener('DOMContentLoaded', () => {
  // 传入的第一个参数为页面中图片元素的id字符串，对应页面里的<img id="cameraFeed" src="image.jpg">
  refreshImage("cameraFeed", "image.jpg");
});

落地优化提示 #

• URL后拼接时间戳的破缓存逻辑是有效的：浏览器会把带不同查询参数的URL识别为独立资源，不会直接读取本地缓存的旧图，保证每次拉取的是Python脚本刚生成的最新图片。
• 不推荐直接用setInterval实现固定间隔刷新：如果某次图片加载耗时超过设定间隔，setInterval会造成请求堆叠，上述「加载完成后嵌套延迟定时器」的方案，能保证两次刷新之间保留足够间隔，不会出现并发请求扎堆的问题。
• 后续如果要降低服务器压力，可以在Python提供图片的接口中加上Last-Modified响应头，JS侧配合做条件请求，只有当图片实际更新时才传输完整文件，减少不必要的带宽消耗。

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