图片懒加载

什么是延迟加载？

延迟加载是一种在加载页面时，延迟加载非关键资源的方法， 而这些非关键资源则在需要时才进行加载。就图像而言，“非关键”通常是指“屏幕外”。

为何要延迟加载图像或视频，而不是直接加载？

延迟加载图像和视频时，可以减少初始页面加载时间、初始页面负载以及系统资源使用量，所有这一切都会对性能产生积极影响。

延迟加载图像

内联图像  元素中使用的图像是最常见的延迟加载对象。延迟加载  元素时，我们使用 JavaScript 来检查其是否在视口中。如果元素在视口中，则其 src 属性中就会填充所需图像内容的网址。

使用 Interp Observer

如果您曾经编写过延迟加载代码，您可能是使用 scroll 或 resize 等事件处理程序来完成任务。虽然这种方法在各浏览器之间的兼容性最好，但是现代浏览器支持通过 Interp Observer API 来检查元素的可见性，这种方式的性能和效率更好。

注：并非所有浏览器都支持 Interp Observer。

与依赖于各种事件处理程序的代码相比，Interp Observer 更容易使用和阅读。这是因为开发者只需要注册一个 Observer 即可监视元素，而无需编写冗长的元素可见性检测代码。然后，开发者只需要决定元素可见时需要做什么即可。

假设我们的延迟加载  元素采用以下HTML内容：

我们应关注三个相关部分：

1、class 属性，这是我们在 JavaScript 中选择元素时要使用的类选择器。

1、src 属性，引用页面最初加载时显示的占位符图像。

3、src 属性，其中包含元素进入视口后要加载的图像的网址。

现在，我们来看看如何在 JavaScript 中使用 Interp Observer，实现延迟加载图像：

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));


  if ("InterpObserver" in window) {
    let lazyImageObserver = new InterpObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });


    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // TODO
  }
});

在文档的 DOMContentLoaded 事件中，此脚本会查询 DOM，以获取类属性为 lazy 的所有  元素。如果 Interp Observer 可用，我们会创建一个新的 Observer，以在 img.lazy 元素进入视口时运行回调。

不过，Interp Observer 的缺点是虽然在浏览器之间获得良好的支持，但并非所有浏览器皆提供支持。对于不支持 Interp Observer 的浏览器，您可以使用事件处理程序。

其实关于图像的懒加载浏览器也开始支持了，浏览器img图片和iframe框架会支持原生懒加载特性，使用loading="lazy"语法。

如您所见，没有JavaScript，没有src属性值的动态交换，只有普通的旧HTML，通过加上 loading 属性。

loading属性为我们提供了延迟加载屏幕外图像，直到用户滚动到他们在页面上的位置再加载。

这种方法它零开销，干净简单。大多数主流浏览器都对 loading 属性有很好的支持，但并不是所有的浏览器都能使用。