能否以百分比形式获取网页元素的加载进度？

我完全懂你的痛点——那些GitHub/Codepen上的静态百分比预加载器看着酷炫，但根本不是真实的加载进度，而window.onload只能告诉你所有资源加载完的那一刻，完全没法跟踪中间过程。要实现真实的资源加载百分比统计，我们得主动跟踪每个资源的加载状态，下面是具体的实现思路和代码：

核心思路 #

要统计真实进度，我们需要：

• 先收集页面中所有需要加载的资源（图片、脚本、样式表等）
• 监听每个资源的load/error事件，记录已完成加载的资源数量
• 用「已完成数/总资源数」计算实时百分比，更新预加载器

完整实现代码 #

HTML结构（先准备预加载器和进度条） #

<!-- 预加载进度条 -->
<div id="progress-bar" style="position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: #eee; z-index: 9999;">
  <div id="progress-fill" style="height: 100%; width: 0%; background: #2196F3; transition: width 0.2s ease;"></div>
</div>
<!-- 你的预加载遮罩层 -->
<div id="magic-box" style="position: fixed; inset: 0; background: white; display: flex; align-items: center; justify-content: center; z-index: 9998;">
  <span id="progress-text">0%</span>
</div>

JavaScript逻辑（跟踪资源加载） #

// 收集所有需要跟踪的资源：图片、带src的脚本、样式表
const resources = [
  ...document.querySelectorAll('img'),
  ...document.querySelectorAll('script[src]'),
  ...document.querySelectorAll('link[rel="stylesheet"][href]')
];

let loadedCount = 0;
const totalResources = resources.length;

// 初始化进度
updateProgress(0);

// 遍历资源，监听加载状态
resources.forEach(resource => {
  // 如果资源已经被缓存加载完成，直接计数
  if (resource.complete) {
    incrementLoaded();
    return;
  }

  // 监听资源加载成功
  resource.addEventListener('load', incrementLoaded);
  // 监听资源加载失败（可选：加载失败也计入完成，避免进度卡着）
  resource.addEventListener('error', incrementLoaded);
});

// 最后监听页面全局加载完成，确保进度拉满
window.addEventListener('load', () => {
  updateProgress(100);
  // 延迟隐藏遮罩，让用户看到100%的状态
  setTimeout(() => {
    document.querySelector('#magic-box').style.display = 'none';
  }, 300);
});

// 计数更新函数
function incrementLoaded() {
  loadedCount++;
  const percentage = Math.round((loadedCount / totalResources) * 100);
  updateProgress(percentage);
}

// 更新进度条和文本
function updateProgress(percent) {
  document.getElementById('progress-text').textContent = `${percent}%`;
  document.getElementById('progress-fill').style.width = `${percent}%`;
}

进阶优化：跟踪动态加载的资源 #

如果你的页面会动态加载资源（比如通过JS新增图片、脚本），上面的方法就无法跟踪了。这时候可以用Performance API的PerformanceObserver来监听所有资源的加载：

// 初始化PerformanceObserver监听资源加载
const resourceObserver = new PerformanceObserver((list) => {
  const entries = list.getEntriesByType('resource');
  entries.forEach(entry => {
    // 过滤我们关心的资源类型
    const validTypes = ['img', 'script', 'link'];
    if (validTypes.includes(entry.initiatorType) && entry.responseEnd > 0) {
      // 资源加载完成时计数
      incrementLoaded();
    }
  });
});

// 开始监听
resourceObserver.observe({ entryTypes: ['resource'] });

注意事项 #

• 缓存资源：上面的代码已经处理了缓存资源的情况（resource.complete判断），避免进度直接跳变
• 跨域资源：如果页面加载了跨域资源且没有配置CORS头，Performance API可能无法获取完整的加载数据，这时候可以回退到第一种方法
• 资源总数统计：如果页面有大量动态资源，第一种方法的资源总数可能不准确，推荐用Performance Observer方案

这样实现的预加载器就是完全基于真实资源加载进度的，再也不是静态模拟的效果了！

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