HTML如何实现加载占位图_网页骨架屏效果代码

骨架屏是用灰色块模拟页面结构的HTML/CSS占位布局，区别于GIF或文字loading；它呈现UI轮廓降低感知等待时间，适用于结构固定的首屏，纯CSS通过渐变动画实现，需框架响应式控制显隐，SSR下须内联样式并确保hydration一致。

什么是骨架屏，和普通 loading 图有什么区别

骨架屏不是动效 GIF，也不是文字“加载中”，它是用灰色块模拟真实页面结构的 HTML/CSS 占位布局。用户看到的是接近最终 UI 的轮廓（比如标题栏、卡片、头像位置），而非空白或旋转图标——这能显著降低感知等待时间。

关键判断：如果页面首屏内容有固定结构（如新闻列表、商品卡片、用户资料），骨架屏就比 loading.gif 更合适；如果结构动态不可预知（比如纯富文本流），强行做骨架屏反而增加维护成本。

纯 CSS 实现骨架屏的最小可行代码

不需要 JS 控制显隐，直接用 class 切换即可。核心是用 background-image: linear-gradient(...) 模拟灰阶色块，并配合 animation 做流动光效。

• 用 .skeleton 类控制整体占位区域尺寸和圆角
• 每个占位元素（如头像、标题）用 background-color: #f0f0f0 + background-image 叠加渐变动画
• 动画必须用 @keyframes 定义，且 background-position 需横向移动才能模拟“扫描光”效果
• 避免用 opacity 动画，它会导致重绘性能下降；优先用 background-position

.skeleton {  background-color: #f0f0f0;  background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);  background-size: 300% 100%;  animation: loading 1.5s infinite;}@keyframes loading {  0% { background-position: 200% 0; }  100% { background-position: -200% 0; }}.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }.skeleton-title { width: 60%; height: 20px; margin-top: 12px; border-radius: 4px; }

如何在 Vue/React 中按需切换骨架屏与真实内容

不能靠 JS 手动增删 class，要利用框架的数据响应机制。重点在于「占位时机」——骨架屏应在数据请求发起后立即显示，而不是等接口返回失败才 fallback。

立即学习“前端免费学习笔记（深入）”；

• Vue：用 v-if 绑定 loading 状态，loading 应在 mounted 或 onMounted 中设为 true，接口 resolve 后设为 false
• React：用 useState 管理 isLoading，注意不要在 useEffect 里忘记清理 pending 请求，否则可能 setState on unmounted component
• 切忌用 v-show 或 visibility: hidden 隐藏骨架屏——它仍会参与布局计算，影响 SSR 渲染一致性
• 真实内容渲染前，骨架屏 DOM 必须已存在，否则会出现“闪一下空白再出骨架”的问题

服务端渲染（SSR）下骨架屏的坑

Node.js 环境不支持 document.createElement，也不能执行浏览器端动画。所以 SSR 骨架屏只能输出静态结构 + 内联样式，JS 动画必须延迟到客户端激活（hydration）后启动。

• 所有骨架屏 CSS 必须内联（inline style）或通过 style 标签注入，不能依赖外部 CSS 文件（SSR 时无 link 加载）
• 动画相关属性（如 animation）应写在 <style> 标签里，且确保该 <style> 在 HTML 字符串中位于骨架元素之前
• 若用 next.js 或 nuxt，需确认骨架组件未使用 window、document 等浏览器 API，否则 SSR 报错 ReferenceError: window is not defined
• Hydration 不匹配（mismatch）是高频问题：服务端输出的骨架结构，和客户端 JS 渲染的真实 DOM 结构必须完全一致，否则 React/Vue 会丢弃整个节点重新挂载

最易被忽略的一点：骨架屏的宽高必须由 CSS 固定（如 height: 80px），不能依赖内容撑开。否则 SSR 输出的 HTML 高度为 0，首屏白屏时间反而更长。