图片懒加载

什么是延迟加载？

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

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

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

延迟加载图像

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

使用 Interp Observer

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

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

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

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

 <img
 class="lazy"
 src="placeholder-image.jpg"
 src="image-to-lazy-load-1x.jpg"
 alt="I'm an image!">

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

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 的所有 <img> 元素。如果 Interp Observer 可用，我们会创建一个新的 Observer，以在 img.lazy 元素进入视口时运行回调。

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

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

<img src="myimage.jpg" loading="lazy" alt="..." />

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

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

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