直接用 loading="lazy" 不行，因其仅控制延迟加载而不处理视觉过渡，无法实现模糊占位与渐变动画；需结合 base64 模糊缩略图、data-src 延迟高清图加载、opacity 过渡及 intersectionobserver 精准触发。

为什么直接用 loading="lazy" 不行

loading="lazy" 只控制图片是否延迟加载，不处理加载过程中的视觉过渡。它不会生成占位、不提供模糊占位图、也不触发渐变动画——浏览器加载完就直接硬切，用户看到的是“突然出现”，尤其在慢网或大图场景下体验割裂。

用 blur-up 技术做占位+渐变的核心步骤

本质是先加载一张极小尺寸（如 20×15）、高度压缩的 base64 模糊图作为 src，等真实高清图通过 onload 加载完成后再切换，并用 CSS 过渡实现淡入。关键不是“模糊滤镜”，而是“低质缩略图占位 + 切换时 opacity 动画”。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 模糊图必须是真实缩略图 base64，不能靠 filter: blur() 动态加——否则首屏仍要解码原图才能模糊，失去意义
• 高清图用 data-src 存，避免初始请求；切换时赋给 src，并移除 data-src
• CSS 必须设 transition: opacity 0.3s ease-in-out，且初始状态加 opacity: 0，加载完成再设为 1
• 记得加 will-change: opacity 防止重绘卡顿

IntersectionObserver 触发加载比 scroll 事件更可靠

滚动监听容易高频触发、丢帧、兼容性差；IntersectionObserver 原生异步回调，性能好，且能精准控制“进入视口多少像素才加载”。对懒加载场景，这是目前唯一推荐的触发方式。

• 阈值设为 0.05（即进入视口 5% 就开始加载），比 0 更早准备资源
• 观察器创建后，每个 <img> 调用 observer.observe(img)，不要重复 new
• 加载成功后必须调用 observer.unobserve(img)，否则持续监听浪费资源
• 注意 Safari 旧版本需 polyfill，但 iOS 15.4+ 和 Chrome 74+ 已原生支持

容易被忽略的细节：宽高固定 + object-fit 配合

如果图片容器宽高不固定，模糊图和高清图尺寸不一致会导致 layout shift（布局抖动），破坏渐变效果。必须显式设置容器 width/height 或用 aspect-ratio，且图片本身用 object-fit: cover 或 contain 对齐。

• 推荐用 padding-top 百分比技巧维持宽高比，比如 padding-top: 56.25%（16:9）
• 不要依赖 img 的 width/height 属性——它们不响应式，且会被 CSS 覆盖
• 高清图加载中，模糊图应撑满容器；切换瞬间不能留白，所以容器背景色最好和主题色一致
• 如果用 background-image 实现，需额外处理 background-size 和过渡，复杂度上升，不建议

实际效果取决于模糊图质量、切换时机和 CSS 动画曲线。很多项目把 base64 模糊图硬编码进 HTML，但更合理的是构建时生成并注入——手动维护极易过期或失真。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！