骨架屏必须精准撑开布局、不闪不抖且无障碍：需设宽高或aspect-ratio，图片用padding-top或aspect-ratio保比例，所有元素加overflow:hidden，仅用background-position动画，禁用::before/after和opacity/transform。
骨架屏不是“加个 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()，前者触发重绘，后者在低配设备上掉帧
最小可用示例：
.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 更早出现”。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 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 名完全一致，靠框架响应式机制自然切换
最易被忽略的是字体渲染闪动：骨架屏消失瞬间，真实文字加载可能触发 FOIT/FOUT。解决办法不是关字体加载，而是确保骨架元素的 font-size、line-height、max-width 和真实文本完全一致——连小数点都不能差。
