lowsrc属性在现代浏览器中已完全不支持，它是IE4–IE6时代的非标准渐进式加载属性，因无W3C背书、仅IE实现、时序耦合强、体验粗糙且干扰现代加载机制，于2019年后被所有主流浏览器彻底移除。
lowsrc 属性在现代浏览器中已完全不支持，不是“部分兼容”或“需加前缀”，而是根本不会触发任何行为。
lowsrc 是什么？为什么被弃用？
lowsrc 是 IE4–IE6 时代为实现“渐进式图像加载”设计的非标准属性：
- 允许指定一张低分辨率图，在
src主图加载完成前先显示它 - 依赖浏览器对两张图的尺寸自动对齐与替换逻辑
但它存在几个致命问题：
- 没有 W3C 标准背书，仅 IE 实现，Firefox/Opera 从未支持
- 与
src的加载时序强耦合：必须先设lowsrc，再设src，否则低图会被直接丢弃 - 无法控制缩放、裁剪或过渡效果，视觉体验粗糙
- 会干扰现代预加载器（如
<link rel="preload">）和懒加载逻辑
2019 年后所有主流浏览器（Chrome、Firefox、Safari、Edge）均已移除该属性的解析逻辑。检查 DOM 时，img.lowsrc 返回 undefined；设置它也不会触发任何网络请求。
替代方案：现在怎么实现低质量占位图（LQIP）
真正可用、可控、可维护的方式只有两类：
-
CSS 背景图 + 内联 SVG 占位
<img src="photo.jpg" alt="风景照" loading="lazy" style="background: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"60\" viewBox=\"0 0 100 60\"><rect width=\"100\" height=\"60\" fill=\"%23e0e0e0\"/><text x=\"50\" y=\"30\" font-size=\"12\" text-anchor=\"middle\" fill=\"%23999\">LQIP</text></svg>') center/cover;">- 优势：零额外请求、可压缩进 HTML、支持响应式
- 注意：SVG 中特殊字符（如
#、<）必须 URL 编码
-
srcset+loading="lazy"+ JavaScript 控制加载时机<img data-srcset="photo-320w.jpg 320w, photo-640w.jpg 640w" src="photo-lqip.jpg" <!-- 真实存在的 2–5KB 小图 --> alt="风景照">- 配合 IntersectionObserver 切换
src，避免阻塞主图解码 - 不要用
onload直接触发，容易在慢网下造成白屏
- 配合 IntersectionObserver 切换
容易踩的坑
- 把
lowsrc和srcset混为一谈：前者是单图替换，后者是响应式多图选择，机制完全不同 - 在 Vue/React 中通过
:attrs="{ lowsrc: '...'}"动态绑定——DOM 层面无效，Vue 3+ 甚至会警告未知属性 - 误以为
loading="eager"能“恢复”lowsrc行为：它只影响加载优先级，不提供占位能力 - 用 base64 编码的
lowsrc值试图“兼容旧代码”：现代解析器直接忽略，且增大 HTML 体积
lowsrc 不是“过时但还能凑合”，它是已被彻底删除的 IE 遗迹。想做占位图，就老实用现代方案——尤其是内联 SVG，轻量、可靠、无兼容性包袱。
