图片占位核心是容器占位、渐进过渡、防跳动：用固定尺寸容器+background-image占位，监听load/error事件控制opacity过渡，data-src配合懒加载，骨架屏用于结构化内容。
图片加载中显示 placeholder，核心是「容器占位 + 渐进过渡 + 防跳动」，不是简单加个 src 或 alt 就能解决。
用 background-image 做静态占位容器
HTML 的
- 容器必须设明确的
width和height（或aspect-ratio），不能依赖图片自然尺寸 - 背景图推荐用 base64 模糊缩略图（LQIP）或纯色渐变，避免额外 HTTP 请求
- 不要用外链占位服务（如 placeholder.com），网络不可靠时直接空白
- 示例：
<div class="img-wrapper" style="background: linear-gradient(45deg, #eee, #ddd); width: 300px; height: 200px;"> @@##@@ </div>
监听 load 和 error 事件控制显隐
仅靠 CSS 背景不够——真实图片加载完成时，得让它「浮现」，而不是粗暴替换。用 JS 监听 load 是最轻量、兼容性最好的方式；error 则兜底处理 404 或跨域失败。
-
opacity: 0初始隐藏图片，比display: none更安全（保留文档流） - 过渡用
transition: opacity 0.3s ease，别用visibility，它不触发重绘动画 - 务必同时监听
error，否则加载失败时用户永远看不到 fallback - 示例：
const img = document.querySelector('.img-wrapper img'); img.style.opacity = 0; img.addEventListener('load', () => img.style.opacity = 1); img.addEventListener('error', () => { img.style.opacity = 1; img.src = '/fallback.jpg'; });
用 data-src 实现懒加载 + 占位协同
如果图片在视口外，src 直接写真实地址会提前触发请求，浪费带宽。配合懒加载时，data-src 存真实地址，初始 src 指向占位图，加载时机由 IntersectionObserver 控制。
- 初始 HTML：
- 滚动进入视口后，把
data-src赋给src，再监听load过渡 - 注意：赋值
src后立即监听事件，否则可能错过快速加载的load - 不要用
loading="lazy"替代 JS 懒加载——它不暴露加载状态，无法和 placeholder 协同
CSS 骨架屏（Skeleton）适合列表类异步内容
单张图片用背景+透明度足够，但如果是文章卡片、商品列表这类结构化内容，骨架屏更合适：用灰色块模拟标题、段落、图片位置，再配 shimmer 动画，视觉上更可信。
- 骨架元素需与真实 DOM 结构一一对应（比如卡片里几个
.skeleton-line），否则加载后布局偏移 - shimmer 动画本质是移动线性渐变背景：
background: linear-gradient(90deg, transparent, #f0f0f0, transparent)+background-size: 200% 100% - JavaScript 加载完成后，用
display: none隐藏骨架，display: block显示真实内容——别用innerHTML替换，破坏语义和 SEO
最容易被忽略的是容器尺寸稳定性：无论用背景、骨架还是 aspect-ratio，只要高度不固定，加载完成瞬间的重排就会让用户感到「抖」。宁可多写几行 CSS 算高宽，也不要依赖 JS 测量或图片 onload 后再设高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
