本文详解如何利用 intersectionobserver 实现图片进入视口时先显示低分辨率像素化占位图，再平滑过渡到高清图的创意效果，兼顾性能优化与视觉表现。
本文详解如何利用 intersectionobserver 实现图片进入视口时先显示低分辨率像素化占位图，再平滑过渡到高清图的创意效果，兼顾性能优化与视觉表现。
在创意型网站（如设计工作室、艺术作品集）中，图像加载不仅关乎性能，更是用户体验的关键触点。像素化入场动画——即图片初始以模糊、块状（image-rendering: pixelated）形式呈现，随后淡入/缩放/渐变过渡为清晰原图——既能强化视觉叙事感，又能自然掩盖加载延迟。本文提供一套生产就绪的实现方案，融合现代懒加载（loading="lazy"）、IntersectionObserver 检测与 CSS 过渡控制，避免全量预加载、确保仅可视区域触发动画。
核心实现逻辑
方案采用「双图层 + 状态驱动」结构：
- 底层：一张极小尺寸（如 64×64）的压缩缩略图，通过 width/height 拉伸至容器尺寸，并强制启用像素渲染；
- 上层：真正的高清图，初始隐藏（opacity: 0），加载完成并进入视口后，添加 .loaded 类触发 CSS 过渡；
- 触发时机：使用 IntersectionObserver 监听元素进入视口，而非 img.onload，确保动画只在用户可见时启动，避免提前加载或无效触发。
完整代码示例
HTML 结构（语义清晰，支持无障碍）：
<div class="image-container"> <img src="https://example.com/photo--tiny.jpg?x-oss-process=image/resize,p_40" alt="描述性文字" class="placeholder" style="max-width:90%" style="max-width:90%"><img src="" data-srcset="https://example.com/photo@2x.jpg 2x, https://example.com/photo.jpg 1x" alt="描述性文字" class="real-image" loading="lazy"> </div>
CSS 样式（关键：像素化占位 + 平滑过渡）：
.image-container {
position: relative;
overflow: hidden;
}
.placeholder {
display: block;
width: 100%;
height: 100%;
image-rendering: -webkit-optimize-contrast; /* Safari 兼容 */
image-rendering: crisp-edges;
image-rendering: pixelated;
transition: opacity 0.3s ease-out;
}
.real-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.real-image.loaded {
opacity: 1;
}
JavaScript（精准控制加载与动画时机）：
// 创建 IntersectionObserver，延迟触发以增强“入场”感
const observerOptions = {
rootMargin: '50px', // 提前 50px 开始监听，提升流畅度
threshold: 0.1 // 10% 可见即触发
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const container = entry.target;
const realImg = container.querySelector('.real-image');
// 仅当真实图片尚未加载时才处理（防重复）
if (!realImg.src && realImg.dataset.src) {
realImg.src = realImg.dataset.src;
realImg.srcset = realImg.dataset.srcset;
// 监听加载完成，再添加 loaded 类（确保图像已解码）
realImg.addEventListener('load', () => {
container.classList.add('loaded');
realImg.classList.add('loaded');
}, { once: true });
}
}
});
}, observerOptions);
// 观察所有容器
document.querySelectorAll('.image-container').forEach(el => {
observer.observe(el);
});
注意事项与最佳实践
- ✅ 必须禁用 loading="lazy" 在占位图上：仅对 .real-image 启用，否则浏览器可能跳过 IntersectionObserver 的主动加载控制；
- ✅ image-rendering: pixelated 兼容性：Chrome/Firefox/Edge 支持良好，Safari 需同时声明 -webkit-optimize-contrast 和 crisp-edges 回退；
- ⚠️ 避免 img.onload 误触发：若直接监听 .real-image.onload 而不结合 isIntersecting，可能导致图片在后台静默加载，失去“视口触发”意义；
- ? 可选增强：为追求更强视觉张力，可在 .loaded 类中加入 transform: scale(1.02) → scale(1) 缩放动画，或叠加轻微 filter: blur(1px) 到 blur(0) 渐变；
- ? 响应式适配：缩略图尺寸建议按 1x/2x 媒体查询动态切换（如 @media (min-resolution: 2dppx) 加载 128×128 占位图），避免 Retina 屏下像素块过细。
该方案已在 Aino Agency 等创意站点验证，既满足高性能懒加载要求，又赋予图像加载以电影级入场节奏——技术为表达服务，恰是前端体验设计的精髓所在。
