怎样实现网页在加载过程中的进度条提示_脚本监控加载事件-html教程-PHP中文网

load事件仅在页面所有资源加载完成时触发一次，适合进度条收尾但无法实现动态百分比；document.readystate仅有三个静态状态，不能反映真实加载进度；推荐用performanceobserver监听resource事件估算进度，或服务端配合content-length+流式响应实现主文档进度监控。

怎样实现网页在加载过程中的进度条提示_脚本监控加载事件

如何用 `window.addEventListener('load')` 监控页面完全加载

页面完全加载完成（包括图片、CSS、JS、iframe 等所有资源）后才触发，适合做「进度条收尾」。但注意：load 事件不提供中间进度，无法实现动态百分比——它只在 100% 时 firing 一次。

常见误用：有人试图在 load 里反复读取 document.readyState 或轮询资源状态，这无效，因为该事件本身无进度参数。

仅适用于「加载完成后的收尾动作」，比如隐藏进度条、启用按钮
若页面含大量第三方 iframe 或异步图片，load 可能延迟数秒甚至失败（如某资源 404 或跨域阻塞）
推荐搭配 DOMContentLoaded 使用：前者管资源，后者管 DOM 结构就绪

为什么 `document.readyState` 不能直接驱动进度条

document.readyState 只有三个值：'loading'、'interactive'、'complete'，它不反映资源加载比例，也不随图片/脚本下载实时更新。把它当进度信号，会导致进度条卡在 0% 或突跳到 100%。

典型错误写法：

setInterval(() => {
  if (document.readyState === 'loading') bar.style.width = '30%';
  else if (document.readyState === 'interactive') bar.style.width = '70%';
  else bar.style.width = '100%';
}, 200);

该逻辑无法区分「DOM 解析中」和「图片还在下载」，视觉进度严重失真
interactive 和 complete 之间可能间隔很久，用户看到进度条停在 70% 十几秒，体验极差
现代 SPA（如 React/Vue）中，readyState 很快到 complete，但首屏内容仍为空白，此时进度条已消失

用 `PerformanceObserver` 监控资源加载耗时（现代方案）

真正可行的进度感知，得靠浏览器 Performance API 主动上报资源加载事件。用 PerformanceObserver 订阅 'resource' 类型，能捕获每个 <img>、<script></script>、<link> 的加载耗时与状态。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

实操要点：

需在尽早初始化 observer，否则会漏掉早期资源（如预加载的 CSS）
统计已成功加载的资源数 / 总资源数，可粗略估算进度；但要注意：动态插入的资源（如懒加载图片）不会被初始 observer 捕获，需重新 observe 或结合 MutationObserver
避免直接用 entry.duration 做加权，因 CDN 缓存、本地缓存会让某些资源 duration ≈ 0，导致权重失衡

示例关键逻辑：

const obs = new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    if (entry.entryType === 'resource' && entry.name.startsWith('https://')) {
      loadedCount++;
      updateProgressBar(loadedCount / totalExpected);
    }
  });
});
obs.observe({entryTypes: ['resource']});