图片懒加载

思路

图片懒加载的核心是延迟加载非首屏图片，减少首次请求数量，提升页面性能。

关键在于动态替换图片的 src 属性。

示例

1. 占位与属性替换：使用 data-src 存储真实 URL，避免 src 直接触发请求：

   <img src="placeholder.png" data-src="real-image.jpg" />

2. IntersectionObserver 监听：通过 IntersectionObserver 监听元素是否进入视口：

   const observer = new IntersectionObserver(entries => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
         const img = entry.target
         img.src = img.getAttribute('data-src') // 替换 src 属性
         observer.unobserve(img) // 加载后停止监听
       }
     })
   })
   
   document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img))