lowsrc 属性在现代浏览器中完全无效，因其是 Netscape 4 和 IE4–6 的非标准私有属性，未被纳入 HTML 规范，2010 年代起被主流引擎彻底移除；真正可用的低网速缩略图方案是内联 SVG 占位 + src 解耦。
lowsrc 属性在现代浏览器中完全不工作——它不是“兼容性差”，而是被所有主流引擎（Chrome、Firefox、Safari、Edge）从解析器里彻底移除了。你写 <img src="high.jpg" lowsrc="low.jpg">，浏览器根本不会发起 low.jpg 的请求，也不会做任何切换逻辑，DOM 中查不到该属性，JS 赋值也无反应。
为什么 lowsrc 在 Chrome/Firefox/Safari 中毫无效果
它是 Netscape 4 和 IE4–6 时代的非标准私有属性，从未进入 HTML 规范。2010 年代中期起各浏览器陆续剥离解析逻辑；截至 2026 年，document.querySelector('img').lowsrc 返回 undefined，即使 HTML 源码里写了，也纯属无效字符。
- 常见错误现象：
<img src="a.jpg" lowsrc="b.jpg">只发出一次网络请求（a.jpg），b.jpg完全静默，开发者误以为路径写错，反复调试却找不到原因 - Vue/React 中用
:attrs="{ lowsrc: 'x.jpg' }"会触发“未知 HTML 属性”警告，且无任何加载行为 - 它和
srcset、loading、decoding等现代加载机制无任何关联，不能混用或降级 fallback
真正可用的低网速缩略图方案：内联 SVG 占位 + src 加载解耦
这是目前最轻量、零额外请求、服务端可直出、无需 JS 的方案，适用于 SSR 场景和首屏关键图。
- 用
background内联 SVG 替代lowsrc：SVG 经 URL 编码后直接嵌入 CSS，体积小、可压缩进 HTML -
background和src完全解耦，避免 FOUC 或布局抖动；src加载完成后再通过 CSS 移除背景实现过渡 - 必须对 SVG 中的特殊字符做 URL 编码，例如
#→%23，→ <code>%3C，否则解析失败 - 加一行
transition: background 0.3s, opacity 0.3s;，并在onload事件中移除 background，就能实现渐变效果
<img src="photo.jpg" alt="风景照"
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; transition: background 0.3s, opacity 0.3s;" />
懒加载场景下用 data-srcset + IntersectionObserver 控制时机
适合非首屏图片，兼顾响应式与低质量占位，但必须保留一个真实 src（即 LQIP 图）来撑开尺寸。
立即学习“前端免费学习笔记（深入）”；
- 不要用
onload直接触发替换：慢网下主图未加载完就执行，会导致白屏 - 监听
IntersectionObserver进入视口后，再赋值el.srcset = el.dataset.srcset，并移除data-前缀 - 避免在 React/Vue 中用
v-if或ngIf控制显隐——这会销毁重建 DOM，丢失原生加载状态 - 始终保留一个
src（如photo-lqip.jpg），确保 img 元素有宽高、能占位、不触发 layout shift
真正容易被忽略的是：所谓“缩略图”本质是资源加载策略问题，不是属性开关问题。lowsrc 是历史遗迹，现代方案必须围绕浏览器原生加载机制设计——要么用内联 SVG 零请求占位，要么用 data-* + JS 精确控制加载时机，二者都绕不开对 src 行为的理解和 DOM 生命周期的把握。
