如何监听Flask视频流加载事件以显示加载动画？

核心思路：监听img元素的加载/渲染状态 #

你用$(window).ready()没用是因为这个事件只关心DOM结构加载完毕，和img标签里的视频流资源加载进度完全无关。正确的做法是监听img元素的加载完成事件，或者通过轮询检测img是否开始渲染内容，来切换加载状态。

方法一：使用img的onload事件 #

先在页面上放好加载GIF和隐藏的视频流img，等img加载完成（开始显示视频流）后，再隐藏加载图、显示视频img。

<!-- HTML结构 -->
<div id="video-container">
  <img src="/loading.gif" id="loading-indicator" alt="加载中..." />
  <img src="" id="video-feed" style="display: none;" alt="视频流" />
</div>

<script>
// 获取元素
const loadingImg = document.getElementById('loading-indicator');
const videoImg = document.getElementById('video-feed');

// 动态设置视频流地址，触发加载
videoImg.src = '/video_feed';

// 监听视频img加载完成事件
videoImg.onload = function() {
  // 隐藏加载图，显示视频流
  loadingImg.style.display = 'none';
  videoImg.style.display = 'block';
};
</script>

方法二：轮询检测img渲染状态（应对onload不触发的情况） #

有些持续推流的视频流可能不会触发img的onload事件，这时候可以用定时器轮询检查img的尺寸，当它的宽高大于0时，说明已经开始渲染内容了：

<div id="video-container">
  <img src="/loading.gif" id="loading-indicator" alt="加载中..." />
  <img src="/video_feed" id="video-feed" style="display: none;" alt="视频流" />
</div>

<script>
const loadingImg = document.getElementById('loading-indicator');
const videoImg = document.getElementById('video-feed');

// 轮询检查
const checkInterval = setInterval(() => {
  // 检查img是否有实际渲染尺寸
  if (videoImg.width > 0 || videoImg.height > 0) {
    loadingImg.style.display = 'none';
    videoImg.style.display = 'block';
    clearInterval(checkInterval); // 停止轮询
  }
}, 500); // 每500毫秒检查一次
</script>

关于Ajax方案的说明 #

其实没必要用Ajax请求后修改div内容，因为img标签设置src本身就是发起HTTP请求获取资源，直接动态设置src并监听状态更简单，没必要多一层Ajax请求。

另外你提到video标签无法正常工作，上面的img方案完全可以替代，只要你的视频流格式（比如MJPEG）支持通过img标签渲染就行。

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