使用JavaScript实现简单的图片懒加载功能

在前端开发中，图片懒加载是一种提高网页加载速度和用户体验的技术。本文将介绍如何使用JavaScript实现简单的图片懒加载功能。

图片懒加载的核心思想是：在页面加载时不立即加载所有图片，而是等到图片即将进入可视区域时才加载。这样可以减少初次页面加载的数据量，加快页面显示速度。

document.addEventListener("DOMContentLoaded", function() {
  const images = document.querySelectorAll("img[data-src]");
  const config = {
    rootMargin: "0px",
    threshold: 0
  };

  function lazyLoadEntry(entries, observer) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.getAttribute("data-src");
        observer.unobserve(img);
      }
    });
  }

  const observer = new IntersectionObserver(lazyLoadEntry, config);
  images.forEach(img => {
    observer.observe(img);
  });
});

以上代码使用了IntersectionObserver API，这是一个性能优异的API，用于异步检测目标元素与其祖先或顶级文档视窗的交叉状态。通过监听图片元素的交叉状态，我们可以在图片即将进入视口时加载图片，实现懒加载效果。这种方法既简单又高效，适用于各种现代浏览器。