HTML如何实现加载占位图_HTML网页骨架屏效果代码-html教程-PHP中文网

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

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

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

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

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

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

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

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

用 .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> 标签里，且确保该 <style></style> 在 HTML 字符串中位于骨架元素之前
若用 next.js 或 nuxt，需确认骨架组件未使用 window、document 等浏览器 API，否则 SSR 报错 ReferenceError: window is not defined
Hydration 不匹配（mismatch）是高频问题：服务端输出的骨架结构，和客户端 JS 渲染的真实 DOM 结构必须完全一致，否则 React/Vue 会丢弃整个节点重新挂载