本文介绍在纯静态 html 页面中模拟资源加载进度的实用方案，通过统计关键资源（如图片、css、js）的加载完成数量，动态更新百分比进度条，兼顾视觉反馈与用户体验。
本文介绍在纯静态 html 页面中模拟资源加载进度的实用方案，通过统计关键资源（如图片、css、js）的加载完成数量，动态更新百分比进度条，兼顾视觉反馈与用户体验。
在静态网站中实现“真实感”加载进度条（而非纯动画或固定时长），核心挑战在于：浏览器原生不提供页面总资源体积与已下载字节数的公开接口（尤其对跨域资源、内联脚本、字体等）。因此，业界普遍采用 “资源计数法” ——即预先明确页面关键可监听资源（如 、、<script>），为每个资源绑定 load 事件，通过完成计数推算相对进度。</script>
以下是一个轻量、无第三方依赖、兼容现代浏览器的实现方案：
✅ 基本原理
- 手动预估关键资源总数（如 10 张图 + 2 个 CSS + 2 个 JS = 14 项）；
- 为每个资源添加 onload="updateProgress()"（或用 addEventListener 更规范）；
- 每次触发 load 时递增计数器，计算 (已加载数 / 总数) × 100% 并更新进度条；
- 添加兜底逻辑（如 setTimeout），避免因某资源失败导致进度卡死。
? 示例代码（精简可运行版）
<meta charset="UTF-8"><title>静态页加载进度条</title><style>
.loading-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: #fff; z-index: 9999; display: flex; flex-direction: column;
justify-content: center; align-items: center;
}
.progress-bar {
width: 300px; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden;
margin-top: 20px;
}
.progress-fill {
height: 100%; background: #4CAF50; width: 0%; transition: width 0.3s ease;
}
.progress-text { font-size: 18px; margin-top: 12px; color: #333; }
</style><!-- 加载遮罩层 --><div class="loading-overlay" id="loadingOverlay">
<div>正在加载页面...</div>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="progress-text" id="progressText">0%</div>
</div>
<!-- 主要内容（默认隐藏） -->
<main id="mainContent" style="display: none;"><h1>欢迎来到我的静态网站！</h1>
<img src="https://placekitten.com/600/400?x-oss-process=image/resize,p_40" alt="示例图1" onload="onResourceLoad()"><img src="https://placekitten.com/600/401?x-oss-process=image/resize,p_40" alt="示例图2" onload="onResourceLoad()"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" onload="onResourceLoad()">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" onload="onResourceLoad()"></script></main><script>
const TOTAL_RESOURCES = 4; // ⚠️ 必须手动设置：2张图 + 1个CSS + 1个JS = 4
let loadedCount = 0;
const overlay = document.getElementById('loadingOverlay');
const content = document.getElementById('mainContent');
const fill = document.getElementById('progressFill');
const text = document.getElementById('progressText');
function onResourceLoad() {
loadedCount++;
const percent = Math.min(100, Math.round((loadedCount / TOTAL_RESOURCES) * 100));
fill.style.width = `${percent}%`;
text.textContent = `${percent}%`;
if (loadedCount >= TOTAL_RESOURCES) {
// 确保 100% 后立即隐藏遮罩并显示内容
setTimeout(() => {
overlay.style.display = 'none';
content.style.display = 'block';
}, 300);
}
}
// ⚠️ 兜底：3秒后强制完成（防资源加载异常）
setTimeout(() => {
if (loadedCount < TOTAL_RESOURCES) {
fill.style.width = '100%';
text.textContent = '100%';
overlay.style.display = 'none';
content.style.display = 'block';
}
}, 3000);
</script>
⚠️ 注意事项与最佳实践
-
TOTAL_RESOURCES 必须准确：需人工统计所有带 onload 的
、（仅 rel="stylesheet"）、<script>（非 async/defer）——动态插入或懒加载资源需额外处理。</script>
- 避免 window.load 的局限性：它只表示 DOM+所有资源加载完毕，但无法提供中间进度；而 onload 在每个资源加载成功时触发，是进度感知的基础。
-
跨域资源限制：
和 <script> 的 onload 可靠，但 fetch 或 XMLHttpRequest 需 CORS 支持才能读取 Content-Length；本方案不依赖字节统计，故天然规避该问题。</script>
- 用户体验优化：建议添加 300–500ms 的最小展示时间（即使资源秒加载），避免进度条闪退；兜底超时（如 3s）确保用户不会无限等待。
-
SEO 与可访问性：保持
内容始终存在于 DOM 中（仅用 display:none 控制可见性），避免影响搜索引擎抓取和屏幕阅读器。
该方案平衡了可行性、轻量性与视觉可信度，适用于博客、作品集、企业单页等静态站点，无需构建工具或后端支持，开箱即用。
