用loading="lazy"和LQIP组合实现渐进加载：src指向小尺寸模糊占位图，data-src存高清图地址，通过IntersectionObserver监听视口进入后替换src并添加loaded类触发动画，避免直接对大图应用filter导致性能问题。
用 loading="lazy" 和低质量占位图（LQIP）组合实现基础渐进加载
纯 HTML 的 loading="lazy" 本身不提供模糊到清晰的过渡效果，它只控制加载时机。真正实现“模糊→清晰”需要配合一张小尺寸、高压缩的占位图（比如 10–20KB 的 200px 宽 JPG），再用 CSS 控制过渡。关键不是等图片加载完才显示，而是先显示模糊图，再用高清图覆盖时触发淡入/缩放动画。
实操建议：
- 生成两张图：一张
photo-lqip.jpg（3–5% 质量，宽高约 200px），一张photo.jpg（原图或响应式尺寸） - HTML 中用
<img>的src指向 LQIP 图，srcset或data-src存高清图地址 - 用 JS 监听高清图
load事件后，把src替换为高清图，并添加class="loaded" - CSS 中定义：
img { filter: blur(6px); transition: filter 0.4s ease, opacity 0.3s ease; } img.loaded { filter: blur(0); }
用 IntersectionObserver 替代 scroll 事件监听可视区域
直接监听 scroll 容易造成重绘卡顿，且在首屏外图片多时性能差。现代方案应优先用 IntersectionObserver 判断图片是否进入视口，再触发高清图加载 —— 这才是“渐进”的前提：不提前加载、不阻塞渲染。
常见错误现象：滚动时图片批量请求，页面卡顿；或图片已滑入但未触发加载（因 observer 配置不当）。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 创建 observer 时设
rootMargin: "50px"，让图片提前 50px 开始加载 - 对每个
<img >调用observer.observe(img) - 回调中调用
img.src = img.dataset.src，并立即移除观察（observer.unobserve(img)），避免重复触发 - 注意兼容性：IE 不支持，需加
intersection-observerpolyfill（仅需 2KB）
用 <picture> + <source> 实现响应式+渐进双保障
单纯靠 JS 替换 src 无法利用浏览器原生的 srcset 解析逻辑和缓存策略，尤其在设备像素比（dpr）变化或窗口缩放时容易出错。用 <picture> 可把 LQIP 作为 fallback，高清图按分辨率/宽度条件加载，同时保留 CSS 过渡能力。
使用场景：需要适配 Retina 屏、平板横屏、以及希望浏览器自动选择最匹配资源的项目。
实操建议：
- 结构示例：
<picture> <source media="(min-width: 768px)" srcset="photo-1200.jpg 1x, photo-2400.jpg 2x"> <source srcset="photo-lqip.jpg"> <img src="photo-lqip.jpg" alt="..."> </picture>
-
<source srcset="photo-lqip.jpg">是 fallback，仅当无匹配<source>时使用（如旧浏览器） - 仍需 JS 监听
load事件，在高清图加载完成后给<img>加loaded类来触发动画 - 注意：Safari 对
<picture>内部img的load事件支持稳定，但部分安卓 WebView 有延迟，建议加 50mssetTimeout保底
为什么不用 blur() CSS filter 直接作用于高清图本身？
有人尝试只用一张高清图，靠 JS 动态设置 filter: blur(8px) 再过渡清除，看似简洁，但实际会引发严重性能问题：大图在应用模糊滤镜时，浏览器需实时渲染高斯模糊，尤其在中低端 Android 设备上极易掉帧，甚至导致图片“闪白”或卡死。
性能影响远大于预加载一张小图。Chrome DevTools 的 Rendering 面板能明显看到 filter 引起的 Composite Layers 增多和 Paint 时间飙升。
实操建议：
- 永远用两张图分离职责：LQIP 负责快速呈现 + 占位布局，高清图负责最终质量
- 避免在
<img>上直接用filter处理 >500KB 的图 - 如果必须用单图方案（如 CMS 无法生成双图），改用
opacity+transform: scale(1.05)模拟“放大模糊感”，成本更低
真正难的不是加个 blur()，而是让模糊图尺寸足够小、解码足够快、且不破坏页面 layout；同时高清图加载时机要准，不能早（浪费带宽），也不能晚（用户已滑过）。这些细节在弱网或低端设备上会立刻暴露。
