前端图片懒加载与占位骨架优化（loading=lazy、IntersectionObserver 与验证）

概述懒加载可延后非关键图片的加载。结合占位骨架与低分辨率占位图，在滚动进入视口时加载高清图，减少阻塞与提升体验。关键实践与参数原生懒加载: `img loading="lazy"`视口检测: `IntersectionObserver` 触发加载占位策略: 低分辨率或SVG占位骨架指标: LCP、总传输与滚动加载延迟示例/配置/实现<img data-src="/img/hero-1440.jpg" src="/img/placeholder.jpg" loading="lazy" alt="hero"> const io = new IntersectionObserver((entries) => { for (const e of entries) { if (e.isIntersecting) { const img = e.target img.src = img.dataset.src io.unobserve(img) } } }) document.querySelectorAll('img[data-src]').forEach(img => io.observe(img)) .skeleton { background: linear-gradient(90deg, #eee 25%, #ddd 37%, #eee 63%); background-size: 400% 100%; animation: shine 1.4s ease infinite } @keyframes shine { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } } 验证首屏体积: 减少非关键图片的初始传输体积滚动加载: 进入视口时加载高清图，体验平滑指标改进: LCP与总传输量改善达到目标阈值兼容性: 不支持懒加载时以JS回退注意事项关键图像不应懒加载，确保首屏体验占位图与骨架需与视觉一致关注SEO与可访问性与缓存与优先级策略协同