HTML骨架屏不能用loading="lazy"，因其仅对img和iframe有效；骨架需与真实DOM严格对齐、设明确尺寸、用linear-gradient动画，并注意SSR/hydration等多阶段稳定性。
HTML 骨架屏本身不提供加载逻辑，也不兼容任何原生“占位加载”语义——loading 属性对 <div>、<section> 等通用容器完全无效，写了等于白写，还会触发 HTML 校验警告。
为什么不能在 div 上用 loading="lazy"
loading="lazy" 是浏览器为 <img> 和 <iframe> 实现的原生懒加载开关，它只影响资源请求时机，不改变 DOM 结构，也不触发任何骨架行为。你在 <div class="skeleton"> 上加这个属性，浏览器直接忽略，开发者工具里也看不到任何效果。
- 校验器（如 W3C Validator）会报错：
Attribute loading is only allowed for img and iframe elements - JS 无法通过
element.loading读取该值，因为 DOM API 不暴露这个属性给非支持元素 - 哪怕配合
IntersectionObserver手动监听，也和loading属性无关——你得自己写逻辑
骨架结构必须和真实 DOM 严格对齐
骨架不是装饰，是布局锚点。如果骨架元素数量、层级或 class 名与后续插入的真实内容不一致，框架（React/Vue）diff 会失败，导致节点无法复用、状态丢失、第三方插件（如代码高亮、图表初始化）失效。
- 用
<template>包裹骨架结构，加载完成后再用replaceWith()替换整块 DOM，比innerHTML = ''后追加更安全 - 每个骨架项必须设明确尺寸：用
width/height或aspect-ratio，禁用min-content类弹性撑开方式 - 响应式下注意
min-height：否则骨架高度塌陷，真实内容插入时引发 layout shift（CLS 指标飙升）
动画方案选 linear-gradient 而非图片背景
用 background: linear-gradient() 做流动灰度效果，是目前最轻量、可控、无网络开销的方案。引入 SVG 或 PNG 作为背景图，不仅多一次 HTTP 请求，还容易因缩放失配造成模糊或拉伸。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)+background-size: 200% 100%+animation: loading 1.5s infinite - 避免用
opacity动画切换骨架/真实内容：会导致文字抗锯齿变化、焦点丢失；改用visibility: hidden或opacity: 0; pointer-events: none - 低配设备需兜底：
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
真正难的不是画几个灰色方块，而是让骨架在 SSR 输出、hydration 激活、数据异步到达、无限滚动挂载这多个阶段中，始终维持结构稳定、尺寸可信、动画克制。稍有错位，用户看到的就是跳动、闪烁或卡死——而这些，往往在开发机上根本看不出来。
