Web 简单的延迟加载

通常我们需要编写 JavaScript 来处理图像延迟加载，通常采用滚动处理程序或交叉观察器的形式

  <img class="lazyload" src="placeholder.jpg" data-src="pine.png">

  <script>
    document.addEventListener('scroll', () => {
      const scrollTop = window.pageYOffset;
      const lazyImages = document.querySelectorAll('.lazyload'); 

      lazyImages.forEach(img => {
        if (img.offsetTop < (window.innerHeight + scrollTop)) {
          img.src = img.dataset.src;
          img.classList.remove('lazyload');
        }
      });
    });
  </script>

但是现在有一个实验性功能，您可以简单地使用它loading="lazy"来实现相同的结果

<img src="pine.jpg" loading="lazy">

将 loading 属性设置为lazy，浏览器将完成所有繁重的工作，并且只有在用户滚动到图像附近时才会加载图像源。我们甚至不需要使用占位符图像来保持我们的标记有效

目前，Chrome、Edge 和 Firefox 支持此功能