实现图像懒加载的前端技术解析

图像懒加载是一种优化网页性能的技术，它可以延迟加载页面中的图像，只有当图像即将出现在用户的可视区域时再进行加载，从而减少网页的加载时间和带宽使用。本文将介绍一些常用的前端技术来实现图像懒加载。

Intersection Observer API

Intersection Observer API 是一种用于观察元素是否出现在可视区域的新的浏览器 API。通过使用 Intersection Observer，我们可以监听目标元素与其祖先、顶级文档的视窗(viewport) 或根元素 (root) 交叉情况，从而实现图像懒加载。

HTML 结构通常是这样的：

<img data-src="path_to_image.jpg" class="lazy-img">

通过设置 data-src 属性来指定图片的真实路径，同时添加 .lazy-img 类来标识需要进行懒加载的图像。

使用 Intersection Observer API 可以这样实现：

const images = document.querySelectorAll('.lazy-img');
const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.5
};

const lazyLoad = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const image = entry.target;
      const src = image.getAttribute('data-src');

      image.setAttribute('src', src);
      observer.unobserve(image);
    }
  });
};

const observer = new IntersectionObserver(lazyLoad, options);

images.forEach(image => {
  observer.observe(image);
});

在上述代码中，我们首先获取所有带有 .lazy-img 类的图片元素。我们可以设置一些选项，例如 root 指定根元素，rootMargin 设置交叉区域的边距，threshold 设置交叉区域比例。然后定义了一个 lazyLoad 回调函数，它会在目标元素与视窗交叉时触发。在该函数中，我们获取 data-src 属性的值并将其设置为 src 属性，同时停止观察该元素。

最后，我们创建了一个 IntersectionObserver 实例，将其与图片元素关联起来，并开始观察。

滚动事件监听

除了使用 Intersection Observer API，我们还可以通过监听滚动事件来实现图像懒加载。当用户滚动页面时，判断图片是否进入可视区域，如果是则加载图片。

实现代码如下：

const images = document.querySelectorAll('.lazy-img');

const lazyLoad = () => {
  images.forEach(image => {
    if (isInViewport(image)) {
      const src = image.getAttribute('data-src');
      image.setAttribute('src', src);
      image.classList.remove('lazy-img');
    }
  });
};

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

window.addEventListener('scroll', lazyLoad);

在上述代码中，我们获取所有带有 .lazy-img 类的图片元素，并定义了一个 lazyLoad 函数用于判断图片是否在可视区域内。通过调用 isInViewport 函数，我们可以判断图片是否进入了可视区域。如果是，则将 data-src 的值设置为 src 属性，并移除 .lazy-img 类，这样图片就会显示出来了。

最后，我们通过监听滚动事件来触发 lazyLoad 函数。

总结

图像懒加载通过延迟加载页面中的图像，能够提高网页性能，减少加载时间和带宽使用。在本文中，我们介绍了两种常用的前端技术来实现图像懒加载：Intersection Observer API 和滚动事件监听。通过合理运用这些技术，我们可以在网页中实现高效的图像懒加载，提升用户体验。

本文来自极简博客，作者：算法之美，转载请注明原文链接：实现图像懒加载的前端技术解析