本文介绍如何结合 IntersectionObserver、CSS image-rendering: pixelated 和过渡动画，为网页图片添加“先模糊像素化、再平滑加载渲染”的创意视觉效果，并确保仅在进入视口时触发加载与动画，兼顾性能与表现力。
本文介绍如何结合 intersectionobserver、css `image-rendering: pixelated` 和过渡动画，为网页图片添加“先模糊像素化、再平滑加载渲染”的创意视觉效果，并确保仅在进入视口时触发加载与动画，兼顾性能与表现力。
要实现类似 Aino Agency 网站中那种富有设计感的图像入场效果——即图片初始以低分辨率（如 64×64）拉伸显示并强制像素化渲染，随后在进入视口后延时过渡为高清版本——关键在于分层控制加载时机、视觉状态与 CSS 动画节奏。以下是一套生产就绪的完整方案，融合懒加载、IntersectionObserver 监听、语义化 HTML 结构与声明式 CSS 过渡。
✅ 核心思路：双图层 + 状态驱动动画
我们不依赖 JS 直接替换 src（易导致闪跳或过早加载），而是采用「占位图层 + 高清图层」叠加结构，并通过 CSS 类控制可见性与过渡：
<div class="pixelated-image"> <!-- 像素化占位图（小尺寸 + pixelated 渲染） --> <img src="https://example.com/photo--small.jpg?x-oss-process=image/resize,p_40" alt="描述文字" class="pixelated-placeholder" loading="lazy"><!-- 高清图（默认隐藏，加载完成并进入视口后激活） --><img src="https://example.com/photo.jpg?x-oss-process=image/resize,p_40" alt="描述文字" class="high-res-image" loading="lazy"> </div>
对应 CSS 定义清晰的状态切换逻辑：
.pixelated-image {
position: relative;
overflow: hidden;
}
.pixelated-placeholder,
.high-res-image {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
}
/* 初始：仅显示像素化占位图 */
.pixelated-placeholder {
image-rendering: pixelated;
image-rendering: -webkit-optimize-contrast; /* Safari 兼容 */
transition: opacity 0.3s ease-out;
}
/* 高清图默认透明隐藏 */
.high-res-image {
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* 激活态：占位图淡出，高清图淡入 */
.pixelated-image.loaded .pixelated-placeholder {
opacity: 0;
}
.pixelated-image.loaded .high-res-image {
opacity: 1;
}
✅ JavaScript：精准监听 + 延迟动画触发
使用 IntersectionObserver 检测元素进入视口后，不立即加载高清图，而是先添加 .loaded 类，再利用 img.onload 确保高清图资源就绪后再启动 CSS 过渡（避免空白闪烁）。同时加入可配置的延迟（如 200ms），强化“渐进式揭示”节奏感：
document.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const container = entry.target;
const highResImg = container.querySelector('.high-res-image');
// 添加 loaded 类，触发 CSS 过渡准备
container.classList.add('loaded');
// 延迟加载高清图（可选：也可提前 fetch，此处为简化）
highResImg.onload = () => {
// 图片加载完成，过渡自然生效
};
highResImg.onerror = () => {
console.warn('高清图加载失败，回退至占位图');
container.classList.remove('loaded');
};
// 可选：为增强效果，延迟 200ms 再真正“激活”过渡（模拟 Aino 的微妙节奏）
setTimeout(() => {
if (highResImg.complete) {
// 已缓存图片直接触发
container.classList.add('transition-ready');
}
}, 200);
observer.unobserve(container);
}
});
},
{ threshold: 0.05 } // 提前 5% 进入即触发，更顺滑
);
document.querySelectorAll('.pixelated-image').forEach(el => {
observer.observe(el);
});
});
? 注意：loading="lazy" 仍保留在两个
上，现代浏览器会智能优化；但高清图实际加载由 JS 控制（或留空 src 待 JS 注入），可进一步规避预加载竞争。
✅ 进阶建议与兼容性
- Safari 兼容：image-rendering: pixelated 在 Safari 中需额外声明 -webkit-optimize-contrast（已包含在上方 CSS）；
- 无障碍友好：确保 alt 文本一致，且占位图与高清图语义相同；
- 性能优化：对 .pixelated-placeholder 使用 WebP 格式 + 超低质量（如 q=10），体积可压至 1–2KB；
- 响应式适配：若需 srcset，高清图保留 srcset 属性，占位图保持单尺寸即可；
- Fallback 方案：不支持 IntersectionObserver 时，可降级为 scroll 事件监听 + getBoundingClientRect() 判断。
这套方案将创意动效与前端最佳实践深度结合——既满足设计师对“数字质感入场”的表达需求，又严格遵循懒加载规范、避免资源浪费，适用于作品集、创意工作室等强调视觉叙事的场景。
