原生js实现图片懒加载的源码

以下是原生js实现图片懒加载的源码：

// 获取所有需要懒加载的图片元素
const lazyImages = document.querySelectorAll("img.lazy");

// 判断图片是否在可视区域内
function isInViewport(image) {
  const rect = image.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

// 加载图片
function loadImage(image) {
  image.src = image.dataset.src;
  image.classList.remove("lazy");
}

// 监听window的滚动事件
window.addEventListener("scroll", function () {
  // 遍历需要懒加载的图片元素
  for (const image of lazyImages) {
    if (isInViewport(image)) {
      loadImage(image);
    }
  }
});

首先，我们获取所有需要懒加载的图片元素：

const lazyImages = document.querySelectorAll("img.lazy");

接着，我们定义一个函数`isInViewport`用于判断图片是否在可视区域内。该函数会返回一个布尔值，表示图片是否在可视区域内：

function isInViewport(image) {
  const rect = image.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

然后，我们定义一个函数`loadImage`用于加载图片。该函数会将图片的`src`属性设置为`data-src`属性的值，并移除`lazy`类：

function loadImage(image) {
  image.src = image.dataset.src;
  image.classList.remove("lazy");
}

最后，我们监听`window`的滚动事件，遍历所有需要懒加载的图片元素，如果图片在可视区域内，则调用`loadImage`函数加载图片：

window.addEventListener("scroll", function () {
  for (const image of lazyImages) {
    if (isInViewport(image)) {
      loadImage(image);
    }
  }
});