当用户滚动到页面的某个部分时才加载相关图片的技术称为“延迟加载”（Lazy Loading）。这可以通过多种方式实现，以下是一些常见的方法：

1. 使用loading="lazy"属性（原生支持）

现代浏览器原生支持图片和iframe的延迟加载，通过在<img>标签中添加loading="lazy"属性，可以简单高效地实现延迟加载。

<img src="image.jpg" alt="example image" loading="lazy">

2. 使用Intersection Observer API

对于需要更复杂控制或在不支持loading="lazy"的浏览器中使用的场景，可以使用JavaScript中的Intersection Observer API。这是一种比较现代的方式，性能优越，可以监控元素是否进入视口（viewport）。

示例代码：

<img data-src="image.jpg" alt="example image" class="lazy">

<script>
  // 检查浏览器是否支持Intersection Observer
  if ('IntersectionObserver' in window) {
    const lazyImages = document.querySelectorAll('img.lazy');
    
    const imageObserver = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {//isIntersecting表示目标元素是否与视口交叉 true表示与视口交叉，说明元素已经进入视口
          const img = entry.target;//事件源对象：也就是进入视口的元素
          img.src = img.dataset.src;//开始加载图片资源
          img.classList.remove('lazy');//图片加载完成，移除类名
          observer.unobserve(img); // 停止观察已加载的图片
        }
      });
    });
    
    //在调用 observe 方法之前，必须确保 IntersectionObserver 实例（imageObserver）已经正确创建并设置好回调函数。否则，可能会错过目标元素的交叉状态变化，因为观察器未准备好处理这些变化
    lazyImages.forEach(img => {
      imageObserver.observe(img);
    });
  } else {
    // 如果浏览器不支持Intersection Observer，可以使用其他的降级方案，比如立即加载图片
    const lazyImages = document.querySelectorAll('img.lazy');
    lazyImages.forEach(img => {
      img.src = img.dataset.src;
    });
  }
</script>

3. 使用JavaScript库

如果你不想自己实现或者需要更多功能，可以使用现成的JavaScript库，如 lazysizes。

使用lazysizes的示例：

<!-- 在HTML中引用lazysizes库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async></script>

<!-- 将图片的src替换为data-src，并添加`lazyload`类 -->
<img data-src="image.jpg" alt="example image" class="lazyload">

lazysizes库会自动处理图片的延迟加载，使用起来非常方便，且功能强大，支持自定义配置、事件回调等。

4. CSS背景图的延迟加载

如果你需要延迟加载背景图片，可以在元素接近视口时动态添加CSS类或者直接使用JavaScript设置background-image。

示例代码：

<div class="lazy-background" data-bg="background.jpg"></div>

<script>
  const lazyBackgrounds = document.querySelectorAll('.lazy-background');

  const backgroundObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.backgroundImage = `url(${entry.target.dataset.bg})`;
        observer.unobserve(entry.target);
      }
    });
  });

  lazyBackgrounds.forEach(bg => {
    backgroundObserver.observe(bg);
  });
</script>

总结

延迟加载图片是提升页面性能的有效手段，特别是在包含大量图片的页面中。通过使用现代浏览器支持的原生loading="lazy"属性、Intersection Observer API、或现成的JavaScript库，可以轻松实现这一功能，从而优化页面加载速度和用户体验。