loading="lazy"仅实现懒加载，不提供视觉过渡；真正渐进式加载需组合占位、叠加、渐进编码或JS控制三类手段。
直接用 loading="lazy" 不等于实现“渐进式加载”——它只解决懒加载，不解决“从模糊到清晰”的视觉过渡。真要让用户感知加载过程、减少白屏焦虑，得组合使用占位、叠加、渐进编码或 JS 控制这三类手段。
用 loading="lazy" + srcset 做基础分层加载
这是最轻量、兼容性最好的起点，适合多数 CMS 或静态站点：
-
loading="lazy"让浏览器自动推迟非视口内图片的请求，但对“加载中状态”无感知 -
srcset和sizes配合能按设备 DPR 和宽度选图，避免大图在小屏上浪费带宽 - 必须提供
src作为降级 fallback（否则老浏览器会不显示） - 不要依赖
onload判断“加载完成”来移除占位——loading="lazy"下onload可能早于渲染，导致闪动
示例：
<img src="fallback.jpg" srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 1920w" sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 33vw" loading="lazy" alt="示例" >
用双图叠加实现“模糊→清晰”视觉过渡
这是 QQ 相册、Unsplash 等实际产品验证过的方案，不依赖 JS 就能工作，关键在 DOM 结构和 CSS 层叠：
- 外层
<div>设固定尺寸并position: relative - 第一张图是缩略图（如 40×30px 拉伸到容器大小），设
filter: blur(8px)+opacity: 0.9，作为底图 - 第二张图是原图，
position: absolute覆盖其上，初始opacity: 0；等onload后加 class 切换为opacity: 1，配合transition: opacity 0.3s - 注意：PNG/GIF 有透明通道时，缩略图要用纯色背景（如
background: #f5f5f5），否则透出底层内容
示例结构：
<div style="position: relative; width: 400px; height: 300px;"> <img src="thumb.jpg" style="width: 100%; height: 100%; filter: blur(8px); opacity: 0.9; background: #eee;"> <img src="full.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s;" onload="this.style.opacity='1'"> </div>
用渐进式 JPEG 实现原生“逐层渲染”
这是唯一不需要 JS、不改 HTML 结构就能让大图“先出轮廓、再填细节”的方式，但容易被忽略两个事实：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 普通导出的
.jpg文件默认是基线（Baseline）模式，不是渐进式——必须显式开启 - Photoshop “存储为 Web 所用格式”里勾选“渐进式”才有效；命令行用 ImageMagick 要加
-interlace Plane参数 - WebP/AVIF 不支持传统渐进式，但现代解码器对它们的流式加载已有类似效果（无需额外配置）
- 渐进式 JPEG 在弱网下优势明显，但文件体积比基线 JPEG 大 5–10%，需权衡
验证是否生效：用 Chrome DevTools 的 Network 面板查看该图片的响应体，如果看到多个 206 Partial Content 分块返回，说明服务端支持范围请求且图片是渐进式编码。
用 IntersectionObserver + LQIP/SQIP 做精准控制
当需要统一处理任意格式（PNG/WebP/AVIF）、或想把占位图做到极致小（
- LQIP 是极小 JPG（如 20×15px，质量 10），转 base64 内联进
src；SQIP 是 SVG 版本，支持矢量缩放 - 务必用
IntersectionObserver替代 scroll 事件监听——滚动抖动时不会重复触发，性能更稳 - 别在
isIntersecting为 true 时立刻赋值src，先检查img.complete，避免重复加载 - 加载失败时要有兜底：清空
src、显示错误图标、记录上报
关键片段：
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
if (!img.src || img.src === img.dataset.lqip) {
img.src = img.dataset.src;
}
observer.unobserve(img);
}
});
});
真正难的不是写几行代码，而是决定在哪一层做哪件事：要不要支持老浏览器？图片是否都可控转码？CDN 是否支持 range 请求？这些决策点比语法细节影响更大。
