Skeleton / Lazy Loading
内容加载完成前，预置页面框架的灰色块动画降低用户等待焦虑。懒加载优先加载可视区域内容，非可视内容即将进入视口时才加载。
👤
用户内容已加载
骨架屏动画平滑过渡到真实内容，减少用户感知等待时间。
📊
数据分析面板
懒加载确保首屏性能最优，图片仅在即将可见时请求。
懒加载图片演示
向下滚动查看图片懒加载效果
/* 骨架屏 shimmer 动画 */
.skeleton {
background: linear-gradient(90deg,
rgba(255,255,255,0.05) 25%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.05) 75%);
background-size: 200% 100%;
animation: skeletonShimmer 1.5s infinite;
}
/* Intersection Observer 懒加载 */
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.add('loaded');
observer.unobserve(img);
}
});
});
← 返回索引