html骨架屏不能用loading属性直接实现，需结合css类（如.skeleton）与linear-gradient背景动画模拟；ssr时只输出语义结构，客户端激活骨架；框架中须确保响应式数据、hydration一致及可访问性。
HTML骨架屏怎么用 loading 属性替代传统占位图
原生 loading 属性只对 <img> 和 <iframe></iframe> 有效，不能直接给任意容器加骨架屏效果。想用它“替代内容”，本质是配合 CSS 控制显隐，而非真渲染骨架结构。
-
loading="lazy"是浏览器级懒加载开关，不影响 DOM 结构或语义，也不触发骨架逻辑 - 真正起作用的是
loading="eager"+ 自定义 CSS 类（比如.skeleton）组合：先渲染带骨架样式的空容器，等资源就绪再移除类、插入真实内容 - 别在
<div> 上写 <code>loading属性——它会被忽略，且校验不通过 - 若用 JS 动态插入内容，建议监听
img的load事件或用IntersectionObserver判断可视区加载完成，再切换状态 - 推荐写法：
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; - 动画关键帧里用
background-position平移，模拟“扫描”效果，比闪烁更自然 - 避免对文字区域用纯色块遮盖——屏幕阅读器仍会读出文字内容，应配合
aria-busy="true"和aria-live="off"暂停播报 - 响应式下注意
min-height设定，否则骨架高度塌陷，造成布局跳动 - 服务端只输出最小必要结构（如空
<article></article>或<section></section>），不塞伪文字、伪头像等“假内容” - 骨架样式应通过 class 控制，且该 class 在 SSR 输出时默认不启用（即服务端不加
skeleton类），由客户端 JS 注入后才激活 - 若必须首屏显示骨架，可用
<template></template>标签包裹骨架结构，JS 激活后再replaceWith()真实内容，避免提前暴露 - 别用
display: none隐藏骨架再 show——这会让部分读屏器跳过整个区块，应改用visibility: hidden+opacity: 0组合过渡 - Vue 中若用
v-if控制骨架显隐，要确保依赖的数据是响应式的，且初始值为null或undefined，而非空数组——否则骨架根本不会出现 - React 中用
useEffect监听数据加载状态时，别把骨架显示逻辑写在条件渲染分支里（如{data ? <realcontent> : <skeleton>}</skeleton></realcontent>），否则服务端和客户端 hydration 可能不一致，触发 Hydration mismatch 警告 - 骨架组件内部别用
Math.random()生成随机宽高——会导致 SSR 和 CSR 渲染结果不同，破坏一致性 - 所有骨架节点都应有明确的
role="status"或aria-hidden="true"，防止被辅助技术误读
CSS 骨架屏样式必须用 background-image 还是 linear-gradient
用 linear-gradient 更轻量、可缩放、无请求开销；background-image 引入 SVG 或 PNG 会多一次 HTTP 请求，还可能因尺寸失配导致模糊或拉伸。
服务端渲染（SSR）时骨架屏怎么保持语义正确
骨架屏只是视觉过渡，不能破坏 HTML 的语义层级和可访问性。SSR 阶段若直接输出骨架 HTML，搜索引擎和读屏软件会把它当真实内容解析。
React/Vue 里用骨架组件容易漏掉的两个细节
框架封装的骨架组件看似省事，但常因生命周期或更新时机错位，导致骨架一闪而过或卡死不消失。
