页面加载时应通过内联css和js在body渲染前显示全屏loading动画，用window.addeventlistener('load', ...)精确控制隐藏时机，确保覆盖所有资源加载完成，并添加pointer-events: none等移动端适配样式。
页面开始加载时就显示 loading 动画
HTML5 静态页没有后端，资源加载完全依赖浏览器解析 HTML、请求 CSS/JS/图片等过程。真正的“加载中”提示必须在 渲染前介入，否则用户会先看到空白或错位内容再闪出动画——这反而更显卡顿。
核心思路是：用内联 CSS + 内联 JS 控制一个全屏 loading 元素的显隐，且把显示逻辑放在 末尾或 开头，隐藏逻辑放在所有资源就绪后（如 window.addEventListener('load', ...)）。
- 不要等
DOMContentLoaded：它不等待图片、字体等资源，用户可能看到 loading 消失但图片还没出来 - 务必用内联样式控制初始显示，避免额外 CSS 请求阻塞 loading 展示
-
loading元素需设position: fixed、z-index: 9999，并覆盖整个视口
用纯 CSS 实现轻量级 loading 动画（无 JS 依赖）
如果只是示意“正在加载”，不需要精确控制时机，可用纯 CSS 方案：把 loading 元素写死在 HTML 中，靠 CSS 动画驱动，再用 JS 在合适时机移除它。这样兼容性好、体积小，适合静态站。
常见误区是直接用 GIF：增加 HTTP 请求、无法控制尺寸和颜色、不支持主题切换。CSS 动画更可控，也更容易适配暗色模式。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
@keyframes+border或clip-path做旋转圆圈，比多层div更轻量 - 动画时长建议设为
0.8s～1.2s，太快显得急促，太慢加重等待感 - 务必加
will-change: transform提升动画性能，尤其在低端设备上
<style>
.loading {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loading::before {
content: '';
width: 40px; height: 40px;
border: 4px solid #eee;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
will-change: transform;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
用 JavaScript 精确控制 loading 显示/隐藏时机
静态页最可靠的“加载完成”信号是 window.addEventListener('load', ...)，它等同于所有资源（含图片、iframe、CSS 中的 @font-face）都下载并解析完毕。比监听 DOMContentLoaded 更符合用户感知。
注意：如果页面有异步加载的图片（如懒加载），它们不会触发 load 事件，此时需要额外监听这些资源的 load，或改用 IntersectionObserver 回调后手动隐藏 loading。
- 把
loading元素放在最开头，确保 DOM 构建最早渲染它 - JS 代码建议内联在
底部，避免阻塞渲染；若放，需加defer - 隐藏时用
el.remove()而非el.style.display = 'none'，减少重排压力
<script>
document.addEventListener('load', () => {
const loading = document.querySelector('.loading');
if (loading) loading.remove();
});
</script>
移动端适配与性能陷阱
在 iOS Safari 或安卓 Chrome 上，如果 loading 动画用了 transform: scale() 或透明度变化，但没开启硬件加速，可能出现闪烁或掉帧。静态页虽简单，但移动端资源更紧张，细节容易被忽略。
另一个常见问题是：loading 元素遮住了整个页面，但用户仍可滚动或点击——这说明没加 pointer-events: none 和 touch-action: none。
- 必须给
.loading加pointer-events: none，否则会拦截下方按钮的点击 - 在
<meta name="viewport">中确保width=device-width已设置，否则 loading 宽度可能计算错误 - 如果用了 WebP 图片但旧安卓机不支持，loading 可能一直不消失——建议 fallback 到 JPEG 并测试真实设备
body 的 margin 或 overflow，导致 loading 不铺满全屏。上线前务必在真机上打开开发者工具，检查 computed styles。 
