最全的图片懒加载4种实现方式

1. IntersectionObserver

优点：
高效，浏览器原生支持，性能好。
简单易用，代码量少。
可以精确控制预加载的范围。
IntersectionObserver使用：https://blog.csdn.net/Zbz00720/article/details/139025413

代码示例：

// 选择所有需要懒加载的图片
const lazyImages = document.querySelectorAll('.lazy');
// 创建一个 IntersectionObserver 实例
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.onload = () => img.classList.remove('lazy');
      observer.unobserve(img);
    }
  });
}, {
  rootMargin: '0px 0px 300px 0px' // 提前加载300px范围内的图片
});

// 开始观察每个懒加载图片
lazyImages.forEach(image => observer.observe(image));

2. 滚动事件监听

优点：
灵活，可以根据滚动位置自定义加载逻辑。
兼容性好，适用于所有浏览器。

代码示例：

window.addEventListener('scroll', () => {
  const lazyImages = document.querySelectorAll('.lazy');
  lazyImages.forEach(img => {
    if (img.getBoundingClientRect().top < window.innerHeight + 300) { // 预加载300px范围内的图片
      img.src = img.dataset.src;
      img.onload = () => img.classList.remove('lazy');
    }
  });
});

3. 预加载下一屏的图片

优点：
用户体验好，滚动时图片已经加载完毕。
可以结合 IntersectionObserver 或滚动事件监听实现。

代码示例：

const lazyImages = document.querySelectorAll('.lazy');
let lastScrollY = window.scrollY;

window.addEventListener('scroll', () => {
  const currentScrollY = window.scrollY;
  if (currentScrollY > lastScrollY) { // 向下滚动时
    lazyImages.forEach(img => {
      if (img.getBoundingClientRect().top < window.innerHeight * 2) { // 预加载下一屏的图片
        img.src = img.dataset.src;
        img.onload = () => img.classList.remove('lazy');
      }
    });
  }
  lastScrollY = currentScrollY;
});

4. 使用第三方库lazysizes

优点：
简单易用，配置灵活。
性能优化好，社区支持强。
兼容性好，适用于大多数浏览器。
lazysizes使用：https://gitcode.com/gh_mirrors/la/lazysizes/overview?utm_source=artical_gitcode&index=top&type=href&#lazysizes

代码示例：
首先引入 lazysizes 库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"

然后在 HTML 中使用 data-src 属性来指定图片地址：

<img data-src="image.jpg" class="lazyload" />

lazysizes 会自动处理懒加载和预加载逻辑，你只需要添加相应的类和属性即可。