图片懒加载方式

懒加载是指：浏览器自己会在图片快进入视口时加载。

1. 原生支持 (推荐)

HTML5 里 <img> 标签已经支持： 

<img src="big.jpg" loading="lazy" alt="图片" />

• 浏览器自己会在图片快进入视口时加载。

• 优点：零 JS，性能最好，现代浏览器大部分支持。

• 缺点：兼容性有限（老浏览器不行）。

2.IntersectionObserver API（推荐方案）

专门用来检测元素是否进入视口的 API：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // 真正加载
      observer.unobserve(img);
    }
  });
});

//将所有图片都变为可观察
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));