最稳妥的纯CSS+HTML加载中Logo实现：在<body>开头内联显示loading元素，<head>中用CSS控制淡出动画，window.addEventListener('load')触发隐藏，并配合<link rel="preload">预加载Logo资源及<meta name="theme-color">解决Safari白屏问题。
用 CSS + HTML 实现加载中 Logo（不依赖 JS）
纯静态方式最稳妥：在 <body> 开头放一个 <div class="loading">，用 CSS 控制它只在页面资源未就绪时可见。关键在于利用浏览器渲染顺序——这个元素会最先被解析、绘制，等主内容加载完再用 CSS 隐藏它。
常见错误是把 loading 元素放在 <body> 末尾，或用 display: none 写在外部 CSS 里，结果首屏闪一下空白才出现 Logo；正确做法是内联样式强制初始显示，并靠后续样式覆盖。
- 在
<body>最开头插入：<div class="loading" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; align-items: center; justify-content: center; z-index: 9999;"> <img src="logo.png" alt="Loading" width="64" height="64"> </div>
- 在
<head>里加覆盖规则（确保它能生效）：<style> .loading { opacity: 1; transition: opacity 0.3s ease-out; } body.loaded .loading { opacity: 0; pointer-events: none; } </style> - 在
</body>前加触发逻辑：<script>document.body.classList.add('loaded');</script>（注意：这行必须在所有关键资源（如 CSS、首屏图片）之后，否则可能过早隐藏）
用 window.addEventListener('load') 触发隐藏更可靠
如果页面有异步图片、字体或第三方脚本，DOMContentLoaded 可能太早，导致 Logo 消失后内容还在“跳”；load 事件等所有资源完成才触发，更适合真实加载场景。
但要注意：load 不会等 CSS @font-face 加载完成（部分浏览器），若 Logo 文字依赖自定义字体，仍可能短暂回退到系统字体。
立即学习“前端免费学习笔记（深入）”；
- 替换掉上面的内联脚本：
<script> window.addEventListener('load', () => { document.body.classList.add('loaded'); }); </script> - 若需兼容 IE9+，避免用箭头函数，改用
function() { ... } - 不要用
setTimeout模拟延迟隐藏——不可靠，且违背“按实际加载状态响应”的原则
用 <link rel="preload"> 加速 Logo 资源加载
如果 Logo 是 .svg 或小尺寸 .png，但用户网络慢，仍可能看到 Logo 延迟出现（白屏时间变长）。预加载能把它提到资源队列最前面。
这个标签必须放在 <head>，且 as="image" 属性不能省，否则浏览器无法正确设置请求优先级和 CORS 行为。
- 在
<head>中加入：<link rel="preload" href="logo.svg" as="image">
- 确保
href路径正确——相对路径以 HTML 文件位置为基准，不是 CSS 文件 - 不要对同一个资源重复 preload，会导致多余请求
移动端 Safari 的透明背景问题
iOS Safari 在页面加载初期会强制白色背景（即使你设了 background: transparent），导致 Logo 下方突兀地闪一下白块。这不是 bug，是 Safari 的渲染优化策略。
唯一有效解法是用 <meta name="theme-color"> 同步声明背景色，让浏览器在加载阶段就铺上对应颜色，视觉更连贯。
- 在
<head>加：<meta name="theme-color" content="#ffffff">
（值需与 Logo 容器背景色一致） - 如果 Logo 背景是深色（如
#1a1a1a），这里也得同步改成#1a1a1a - 该 meta 标签对 Chrome/Edge 也有作用，但仅影响地址栏和 PWA 启动屏；Safari 才真正用于加载期背景
sizes，都可能导致它成为加载瓶颈——这时候加再漂亮的动画也没用。先查 Network 面板里 logo.* 这一项的下载耗时，比调 CSS 更重要。 
