img:loading 伪类目前仅 Chrome 122+ 和 Safari 17.4+ 有限支持，Firefox 和旧版 Edge 不识别，必须用 @supports selector(img:loading) 检测，不可用于关键 UX 控制。
img:loading 伪类是否可用？先看浏览器支持现状
目前（2026年5月），img:loading 仍处于 CSS Selectors Level 4 草案阶段，**Chrome 122+ 和 Safari 17.4+ 有限支持**，Firefox 和旧版 Edge 完全不识别。直接写 img:loading { opacity: 0.6; } 在多数用户环境里会被忽略——不是语法错，是压根不解析。
常见错误现象：
– 开发时看着正常（用新版 Chrome 测试），上线后大量用户看不到加载态样式
– 控制台无报错，但 DevTools 的 Styles 面板里根本找不到该规则被应用的痕迹
– 和 img:is(:loading) 混用，后者是 JS API，不能和伪类混为一谈
- 必须搭配
@supports selector(img:loading)做特性检测，否则降级逻辑无法触发 - 不要依赖它做关键 UX 控制（比如隐藏未加载图片），只用于增强型视觉反馈
- Safari 对
img:loading的触发时机较保守：仅当src非空且尚未触发load或error事件时才匹配；srcset切换过程中的中间态不触发
如何安全地用 :loading 实现占位与渐进显示
真正能落地的场景，是配合低质量占位图（LQIP）或颜色占位，在资源加载完成前提供结构感知。核心不是“动效”，而是“避免空白闪跳”。
典型写法示例：
img {
background-color: #f0f0f0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%23f0f0f0'/%3E%3C/svg%3E");
}
@supports selector(img:loading) {
img:loading {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='%23ccc' stroke-width='4'/%3E%3C/svg%3E");
}
img:loaded {
animation: fade-in 0.3s ease-out;
}
}
-
img:loading和img:loaded是成对概念，但后者尚未标准化，当前仅 Safari 支持img:loaded，Chrome 不支持——所以img:loaded动画要慎用 - 占位 SVG 必须内联（data URL），避免额外 HTTP 请求拖慢首屏
- 不要在
img:loading里设display: none，会导致布局塌陷；改用opacity: 0.7+filter: blur(1px)更安全
替代方案：用 loading="lazy" + JS 监听更可控
当需要精确控制加载状态（比如统计加载失败率、切换 fallback 图片），CSS 伪类力不从心，得回到 JS。
关键点：
-
<img src="a.jpg" loading="lazy">的loading属性只影响加载时机，不影响 CSS 状态；但它会触发HTMLImageElement的loading属性值为"lazy"，可用于 JS 判断 - 监听
load和error事件比依赖伪类可靠得多，尤其对动态插入的图片 - 可封装一个轻量函数：
observeImageLoad(imgEl, { onLoading(), onLoad(), onError() })，内部用img.complete判断初始状态，再补监听
容易踩的坑：
– 直接监听 img.onload 但没处理 img.complete === true 的同步完成情况，导致首次渲染漏掉回调
– 用 IntersectionObserver 判断进入视口后再加载，但没 fallback 到 img.addEventListener('load', ...)，导致非懒加载图片无法响应
移动端 WebView 兼容性特别注意
Android WebView（尤其基于 Chromium 115 以下版本）对 img:loading 的支持是断层式的：部分机型识别伪类但不触发重绘，导致样式写了却没变化。
实操建议：
- 在 hybrid App 中，优先使用 JS 注入的 class 控制加载态（如
img.is-loading），CSS 只负责定义动画，不依赖伪类 - 若坚持用伪类，必须加兜底：
img:not(:loading):not([data-loaded]) { opacity: 0.8; }，然后由 JS 在load后加data-loaded属性 - 测试时务必覆盖 Android 12~14 的系统 WebView，不能只信 Chrome for Android
真正难的不是写出 img:loading 这行代码，而是判断“这张图到底算不算在加载中”——浏览器有自己的节奏，而用户只看到结果。伪类只是快照，JS 才是全程录像机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
