CSS加载状态过渡，伪元素实现简单Loading效果

本文揭示了一个常见误区：纯CSS无法真正监听外部样式表的加载状态，所谓“CSS加载过渡效果”本质上是JavaScript与CSS协同的结果——JS负责精准捕获link.onload事件来判断加载完成时机并切换类名，CSS则借助::before或::after伪元素以轻量、无侵入的方式呈现Loading动画；文章不仅给出了可立即落地的代码闭环（含遮罩层、旋转动画及失败降级），更深入剖析了多文件聚合、动态插入兼容、Safari兜底策略及低版本WebView渲染陷阱等实战细节，直击前端资源加载控制中最易被忽视却至关重要的边界问题。

如何用伪元素给CSS加载加Loading效果

直接说结论：纯CSS做不到监听外部样式表是否加载完成，所谓“CSS加载状态过渡”，本质是用JS触发、CSS实现视觉反馈，伪元素只是其中一种低成本的视觉方案。

为什么不能只靠::before或::after自动响应CSS加载

伪元素本身不感知资源加载，它只响应DOM结构和CSS规则是否生效。如果目标CSS文件还没下载完，相关类名没被应用，或者关键样式被阻塞，::before就根本不会渲染——更谈不上“过渡”。常见错误现象是：页面闪一下空白，或Loading图标一直不消失。

• 浏览器对@import、link[rel="stylesheet"]没有提供CSSOM加载完成事件
• document.styleSheets里对应sheet的cssRules可能为空或抛错，尤其跨域或未就绪时
• 用onload监听标签最可靠，但仅支持同源，且IE10+才稳定

实际可行的最小闭环：JS监听 + 类名切换 + 伪元素动画

核心思路是把“加载中”状态交由JS控制，CSS只负责表现。用伪元素画Loading比额外写更轻量，也避免干扰语义结构。

• 给或容器加一个初始类，比如loading-css
• 在CSS里用.loading-css::before定义遮罩层和旋转动画
• JS监听的onload，成功后移除该类；失败时可加.loading-css.failed做降级提示
• 注意：伪元素必须设content: ""，否则不渲染；position: fixed需配合z-index确保压住内容

body.loading-css::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.8);
  z-index: 9999;
  animation: spin 1s infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

容易被忽略的兼容性和边界情况

这个方案看着简单，但几个细节不处理好，Loading就会卡死或乱跳：

• 多个CSS文件时，不能只监听第一个，得用Promise.all聚合所有onload事件
• 动态插入的（比如主题切换），要手动绑定onload，不能依赖HTML解析顺序
• Safari对link.onload支持不稳定，建议加setTimeout兜底，比如10秒后强制移除loading类
• 伪元素动画若用transform，在低版本Android WebView里可能闪烁，可改用animation-timing-function: steps(12)模拟帧率控制

真正难的不是画那个转圈，而是判断“什么时候才算加载完了”——这永远需要JS定，CSS只管怎么画。

理论要掌握，实操不能落！以上关于《CSS加载状态过渡，伪元素实现简单Loading效果》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！