网页加载骨架屏实现：基于HTML文档结构的预渲染方案-html教程-PHP中文网

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

骨架屏必须随服务端html一同下发，否则导致白屏→骨架→内容三阶段闪动；其dom须与真实结构完全一致，且需服务端直出、class/层级/数量严格匹配，配合伪元素动画与intersectionobserver占位等技术协同实现。

网页加载骨架屏实现：基于html文档结构的预渲染方案

骨架屏必须随服务端 HTML 一起下发，否则用户看到的是“白屏 → 灰色骨架 → 真实内容”，三阶段闪动，体验比纯 loading 更差。

所有前端框架（Vue/React/Next/Nuxt）的骨架屏失效，90% 源于骨架 DOM 没出现在初始 HTML 中。浏览器解析 HTML 时若没看到 .skeleton-card 这类节点，后续 JS 插入就是“补救”，已错过首屏渲染时机。

Next.js：在 getServerSideProps 或 generateStaticParams 阶段，用 renderToStaticMarkup 提前生成骨架 HTML 字符串，拼进 html 字符流里
Nuxt3：把骨架模板放在 server/components/ 目录下，确保只在服务端解析，不进客户端 bundle
纯 PHP/Node.js 模板：骨架 HTML 和真实内容共用同一套结构变量，仅靠 data-loaded 属性控制显隐，而非条件编译
切忌：用 v-if="loading" 或 {loading && <skeleton></skeleton>} —— 这类逻辑在 JS 执行后才生效，骨架晚于白屏出现

Vue/React 水合（hydration）失败、布局跳动、CLS 值飙升，多数因骨架节点和真实节点的 class 名、嵌套深度、兄弟节点数量不匹配。浏览器无法复用 DOM，只能销毁重建。

真实卡片是 <div class="card"> <img><h3></h3> <p></p> </div>，骨架就得是 <div class="card"> <div class="skeleton-image"></div> <div class="skeleton-title"></div> <div class="skeleton-text"></div> </div>
列表项数量要对齐：后端返回 5 条数据，骨架就得渲染 5 个 .skeleton-item，不能写死 count={3} 然后靠 JS 补足
禁用 display: none 切换：它会让骨架退出文档流，真实内容插入时触发重排；改用 opacity: 0 + pointer-events: none 或 visibility: hidden
图片占位必须用 aspect-ratio（现代）或 padding-top 百分比 hack（兼容），不能只设 width: 100% 导致高度塌陷

直接给骨架容器加 animation 会导致加载完成后动画还在跑，或多个骨架节点动画节奏错乱。关键在于动画只作用于视觉层，不干扰布局和状态。

动画定义统一写一次：

@keyframes skeleton-loading {<br>  0% { background-position: -200px 0; }<br>  100% { background-position: 200px 0; }<br>}

每个骨架子元素用 ::before 伪类承载动画：.skeleton-title::before、.skeleton-avatar::before，且必须带 content: "" 和 position: absolute
父容器设 position: relative，防止伪元素定位脱标

加载完成时，不要删动画，而是通过 data-loaded 切换样式：

[data-loaded] .skeleton-title::before {<br>  animation: none;<br>  background: transparent;<br>}

滚动到底部才触发加载，用户会看到空白；滚动监听手动计算位置，又容易误判或卡顿。真正的解法是用 IntersectionObserver + 显式占位符 + 加载状态锁。

在列表末尾插入一个固定高度的占位符：<div id="infinite-trigger" style="height: 1px;"></div>
用 new IntersectionObserver(() => {...}, { rootMargin: '200px' }) 监听，200px 是缓冲距离，避免临界点卡顿
触发加载后立即调用 observer.unobserve(triggerEl)，等请求返回再重新 observe()，防止重复触发
骨架区块必须和真实数据块一一对应：第 2 页加载出 10 条，就替换掉对应的 10 个 .skeleton-item，不能整块 innerHTML = '' 再塞新 DOM —— 这会清空 focus、丢失第三方插件状态

最常被忽略的点：骨架屏不是“加个灰色 div 就完事”，它是服务端、CSS、DOM 结构、JS 状态四者严丝合缝的协作结果。任一环节脱节，就会从体验优化变成体验破绽。