现代网页图片加载应主动降级：用lqip小图占位、intersectionobserver延迟高清加载、css过渡掩盖空白；src直写高清图会阻塞渲染，未设宽高或loading="lazy"加剧lcp恶化。
HTML图片加载慢时，不能靠“等它快起来”，而要主动降级：用小图占位、延迟高清加载、视觉过渡掩盖空白——这不是妥协，是现代网页的标准交付节奏。
为什么直接写 src 就卡住？
浏览器解析到 <img src="big.jpg"> 时，会立即发起请求，并阻塞关键渲染路径（尤其在无 width/height 或 loading="lazy" 时）。用户看到的是白块、跳动或长时间等待，不是“加载慢”，而是“没给浏览器留余地”。
- 没设宽高 → 触发回流，LCP 恶化
- 没加
loading="lazy"→ 首屏外图片抢带宽 - src 直接指向高清图 → 无占位，空白时间不可控
- 用了已废弃的
lowsrc→ 完全被忽略，连错误提示都没有
用 LQIP 占位图 + data-src 替换是最稳的降级起点
不依赖 polyfill、不强求服务端改格式，纯前端可落地。核心是把“先显示”和“后加载”拆开：src 指向一张小图，真实高清地址存在 data-src 里，JS 控制何时替换。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- LQIP 图建议 200px 宽、3–5% 质量 JPG，体积控制在 10–20KB，能快速解码且撑起容器结构
- 不要用 base64 占位图超过 200 字节，否则拖慢 HTML 解析，反而拉长 LCP
-
<img src="photo-lqip.jpg" class="js-progressive">—— 这行 HTML 就是全部声明 - 替换后必须立刻移除观察器（
observer.unobserve(img)），否则滚动中重复触发请求
用 IntersectionObserver 替代 scroll 监听视口
滚动监听在低端安卓或密集图片页极易卡顿，且无法提前预判；IntersectionObserver 是浏览器原生异步机制，性能更可靠，也更符合“渐进”本意：只在需要时才加载。
- 初始化 observer 时设
rootMargin: "50px"，让图片在进入视口前就开始加载，避免“跳入” -
threshold: 0.01比0更稳妥，某些浏览器对完全不可见状态判定不准 - IE 不支持？引入
intersection-observer-polyfill（仅 2KB），别自己手写兼容逻辑 - 别在回调里直接赋值
img.src = img.dataset.src后就结束——记得加loaded类触发动画
CSS 过渡必须同时控制 filter 和 opacity
只靠 opacity 淡入，会暴露底图拉伸失真；只靠 filter: blur()，高清图一替换就会闪帧。两者叠加才能兼顾结构稳定与视觉平滑。
- 初始样式：
img { filter: blur(6px); opacity: 1; transition: filter 0.4s ease, opacity 0.3s ease; } - 加载完成加类：
.loaded { filter: blur(0); opacity: 1; } - 别用
transition: all——filter和opacity的过渡行为差异大，混在一起难调且易出错 - 移动端 Safari 对图像解码时机敏感，加
will-change: opacity可缓解闪动，但会略增内存开销
真正容易被忽略的，不是“怎么写 JS”，而是“谁来生成那张 LQIP 图”。如果后端没做统一转码（比如用 Sharp 开启 progressive: true），前端再怎么过渡，第一帧仍是空白或骨架屏——降级方案的前提，是至少有一张能立刻 decode 的小图站在那里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
