HTML中如何制作带骨架屏的内容加载占位-html教程-PHP中文网

骨架屏必须精准撑开布局、不闪不抖且无障碍：需设宽高或aspect-ratio，图片用padding-top或aspect-ratio保比例，所有元素加overflow:hidden，仅用background-position动画，禁用::before/after和opacity/transform。

html中如何制作带骨架屏的内容加载占位

骨架屏不是“加个 loading 动画”就能凑合的，它必须在真实内容还没来时，就准确撑开布局、不闪、不抖、不影响可访问性。做错一步，用户看到的可能是白屏、文字跳动、或屏幕阅读器读出一堆空 div。

怎么用纯 CSS 写出不塌、不闪、能通过无障碍检测的骨架元素

骨架元素塌掉，90% 是因为没设 width 和 height（或 aspect-ratio），只靠 background-color 是撑不开流式布局的。

图片占位必须用 aspect-ratio: 16 / 9（现代浏览器）或 padding-top: 56.25% + position: relative + 子元素 position: absolute 保比例
所有骨架块都要加 overflow: hidden，否则渐变动画会溢出圆角边界
禁用 ::before/::after 插入文字或符号——屏幕阅读器会误读；用纯背景色+渐变即可
动画只用 background-position 横向移动，别碰 opacity 或 transform: translateX()，前者触发重绘，后者在低配设备上掉帧

最小可用示例：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.8s infinite;
}
@keyframes loading {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

Vue/React 中骨架屏显隐时机错在哪

常见错误是等 mounted 或 useEffect 才显示骨架——此时 JS 还没执行完，用户已看到白屏。骨架必须“比 JS 更早出现”。

Vue：初始 loading: true 必须在 data() 或 setup() 顶层声明，不能延迟到 onMounted 里才赋值
React：用 useState(true) 初始化，且请求发起后立即 setLoading(true)，而不是等接口返回才设
SSR 场景下，服务端已吐出真实 HTML，客户端 hydration 时若仍显示骨架，会闪一下——需加判断：document.readyState === 'complete' 时跳过初始骨架
千万别用 v-show 或 visibility: hidden 控制显隐，它们仍参与布局计算，SSR 时 hydration 会错位

无限滚动中骨架屏怎么接续才不卡、不漏、不重复请求

滚动到底才触发加载，用户已经看到空白了；手动监听 scroll 事件又容易高频触发、误判、卡顿。

用 IntersectionObserver 监听页尾占位符（如 <div id="infinite-trigger"></div>），比算 scrollTop 稳定得多
设置 { rootMargin: '200px' }，让用户还有 200px 就开始加载，留出网络和渲染缓冲
一次加载中，unobserve 触发器，加载完成后再 observe，避免重复请求
替换 DOM 时别用 innerHTML = '' 清空再塞新 HTML——Vue/React 组件状态、焦点、第三方插件全丢；应保持骨架与真实内容结构、class 名完全一致，靠框架响应式机制自然切换