使用极小尺寸低清图占位，配合css高斯模糊与透明度过渡及intersectionobserver视口监听，可实现“先见轮廓、再显细节”的画廊级加载效果。
直接用一张极小尺寸、高压缩的低清图做占位，再叠加 CSS 高斯模糊 + 透明度过渡，配合视口监听触发高清图替换，就能实现画廊级的“先见轮廓、再显细节”效果。关键不在图多大，而在加载节奏和视觉连贯性。
选对占位图：小、快、准
占位图不是随便压缩就行——它得足够小（建议 1–5KB），尺寸控制在 20×20 到 100×100 像素之间，格式统一用 JPEG（兼容性好，支持内联 base64）。可以用 Sharp、SQIP 或 cwebp 工具批量生成，例如：
- 用
sharp把原图缩到 30px 宽，质量压到 20，再加高斯模糊半径 3–5px - 转成 base64 后嵌入 HTML：
<img src="data:image/jpeg;base64,/9j/4AAQ..." class="lqip"> - 确保占位图宽高比与高清图一致，避免拉伸或留白
写稳 CSS：blur + opacity + display 缺一不可
只写 filter: blur(8px) 和 transition 是不够的。Safari 和部分安卓 WebView 对 filter 渲染很敏感，必须补全基础样式：
宝塔Linux面板11.3.0
下载
宝塔面板11.3.0是一款针对Linux服务器设计的可视化管理工具，通过重构核心模块实现资源占用显著降低，尤其适合低配置服务器环境。它将复杂的命令行操作转化为直观的图形界面，帮助开发者快速完成网站部署、环境配置及日常运维工作，无需专业技术背景即可高效管理服务器。
-
display: block—— 触发 filter 管线，否则 Safari 可能不生效 -
filter: blur(8px); opacity: 1;—— 初始状态设为模糊但完全可见，保留轮廓感 -
transition: filter 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s—— 用缓动函数让过渡更自然 -
&.loaded { filter: blur(0); opacity: 1; }—— 清晰态不降 opacity，避免亮度突变
JS 控制时机：用 IntersectionObserver 替代 onload
别等 img.onload——LQIP 图自己就会触发，容易误判。正确做法是监听进入视口后再发起高清图请求：
- HTML 中用
data-src存高清图地址：<img src="lqip.jpg" class="lqip"> - JS 创建
IntersectionObserver，rootMargin: "100px"提前加载，避免滚动时卡顿 - 回调里立刻执行：
img.src = img.dataset.src; img.classList.add("loaded"); observer.unobserve(img); - 避免给所有图片同时监听——首屏后才挂载 observer，防止初始化压力过大
绕过常见坑：跨域、iOS、布局抖动
上线前必须检查这几个硬伤点：
- 高清图返回头必须含
Content-Type: image/*，且无 CORS 拦截（尤其 CDN 域名不同） - iOS Safari 失效？查父容器是否用了
transform: translateZ(0)或will-change，它们会关闭 filter 渲染管线 - 列表中图片跳动？给
<img>设固定宽高（如aspect-ratio: 4/3），或用min-height占位 - 小程序不支持 filter？改用 Canvas 绘制模糊图，或接入原生 blur 插件，别硬套 H5 写法
