在过去的几十年里，网络已经发生了变化，今天的网站不仅仅是由文字和颜色组成，还包含了无数的媒体内容。首先也是最重要的图像。

// 零JS实现图像的本地延迟加载

<img src="/image.jpg" alt="前端指北" />

但是这和延迟加载有什么关系呢？

延迟加载是一种延迟在页面加载时加载非关键资源的技术。并且，这些非关键的资源是在需要的时候加载的。这意味着通过延迟加载，我们实现了得到以下效果：

• 通过延迟加载，我们可以通过减少最初需要加载的图像数量来提高加载速度
• 延迟加载的图像可能永远不需要加载，从而降低成本

如何实现

我们先来对比一下使用js的延迟加载方法和0js的加载方法

JavaScript方法

• 事件监听器

<img data-src="/image.jpg" alt="前端指北" />

// 零JS实现图像的本地延迟加载

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages = document.querySelectorAll("img.lazy");    
  var lazyloadThrottleTimeout;
  
  function lazyload () {
    if(lazyloadThrottleTimeout) {
      clearTimeout(lazyloadThrottleTimeout);
    }    
    
    lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
              img.classList.remove('lazy');
            }
        });
        if(lazyloadImages.length == 0) { 
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
    }, 20);
  }
  
  document.addEventListener("scroll", lazyload);
  window.addEventListener("resize", lazyload);
  window.addEventListener("orientationChange", lazyload);
});

该技术在浏览器中使用滚动、调整大小和定位/更改事件上的事件监听器。如果触发了上面提到的事件之一，并且图像进入了viewport，那么 data-src 属性将被替换为 src 属性，以触发加载调用。

零JS代码

所谓的零JS代码就是：只需将 loading = “lazy”添加到img标签里，就可以了。

// 零JS实现图像的本地延迟加载

<img src="/path/to/your/image.jpg" loading="lazy" />

属性值:

• auto （默认值)等于不包括属性
• lazy 延迟加载
• eager 立即加载

兼容性

不支持 loading 属性的浏览器只是简单地忽略它，没有任何副作用。