原生js怎么实现图片懒加载

原生JS实现图片懒加载的方法有：Intersection Observer API、滚动事件监听、设置占位符、预加载与替换。其中，Intersection Observer API 是最推荐的方法，因为它性能更好、代码更简洁。

一、Intersection Observer API

Intersection Observer API 是一种用于检测元素可见性变化的强大工具。它可以在用户滚动页面时，检测某些元素是否进入了视口，并触发相应的回调函数。它不仅能够提升性能，还能简化代码逻辑。以下是实现图片懒加载的详细步骤：

1.1 创建Intersection Observer对象

首先，我们需要创建一个 IntersectionObserver 对象，并定义它的回调函数。当目标元素进入视口时，这个回调函数会被触发：

const lazyLoad = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
};
const observer = new IntersectionObserver(lazyLoad, {
  rootMargin: '0px 0px 50px 0px',
  threshold: 0.01
});

1.2 标记需要懒加载的图片

在HTML中，我们需要使用 data-src 属性来存储图片的真实URL，而 src 属性使用一个占位符图片：

<img data-src="real-image.jpg" src="placeholder.jpg" alt="Description">

1.3 观察图片元素

使用 IntersectionObserver 对象来观察这些图片元素：

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

二、滚动事件监听

虽然 Intersection Observer API 是现代浏览器的推荐方法，但在一些老旧浏览器中可能不支持。这时候可以使用滚动事件监听来实现相同的功能。

2.1 监听滚动事件

我们可以通过监听 scroll 事件来检测用户滚动页面的行为：

window.addEventListener('scroll', lazyLoad);

2.2 判断图片是否进入视口

在 lazyLoad 函数中，我们需要判断图片是否进入了视口：

const lazyLoad = () => {
  const images = document.querySelectorAll('img[data-src]');
  const windowHeight = window.innerHeight;
  images.forEach(img => {
    const rect = img.getBoundingClientRect();
    if (rect.top < windowHeight) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
};

2.3 优化性能

为了避免频繁触发滚动事件的回调函数，我们可以使用防抖（debounce）或节流（throttle）技术来优化性能：

const debounce = (func, delay) => {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
};
window.addEventListener('scroll', debounce(lazyLoad, 200));

三、设置占位符

在懒加载实现过程中，设置占位符图片是一个重要的步骤。占位符不仅可以提升用户体验，还可以减少页面布局的抖动。

3.1 使用占位符图片

在HTML中，使用占位符图片来代替真实图片的加载：

<img data-src="real-image.jpg" src="placeholder.jpg" alt="Description">

3.2 替换占位符

当图片进入视口时，我们将占位符替换为真实图片：

const lazyLoad = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
};

四、预加载与替换

在实现懒加载时，预加载技术可以提升用户体验，避免图片加载时的短暂空白。

4.1 创建Image对象预加载

在图片进入视口之前，我们可以使用 Image 对象来预加载图片：

const preloadImage = (img) => {
  const src = img.dataset.src;
  if (!src) {
    return;
  }
  const image = new Image();
  image.src = src;
  image.onload = () => {
    img.src = src;
  };
};

4.2 结合Intersection Observer

将预加载函数结合到 Intersection Observer 回调中：

const lazyLoad = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      preloadImage(entry.target);
      observer.unobserve(entry.target);
    }
  });
};

五、性能优化

在实现图片懒加载时，性能优化是一个不可忽视的方面。良好的性能优化可以提升用户体验，并减少对系统资源的消耗。

5.1 使用防抖和节流

防抖和节流技术可以减少滚动事件监听时的频繁调用，提升性能：

const throttle = (func, limit) => {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
};
window.addEventListener('scroll', throttle(lazyLoad, 200));

5.2 使用CSS优化

使用CSS优化页面布局，可以减少图片加载时的抖动：

img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}
img[data-src] {
  opacity: 1;
}

六、案例分析

在实际项目中，图片懒加载的应用非常广泛。以下是一个简单的案例分析，展示如何在项目中集成图片懒加载功能。

6.1 项目需求

一个电商网站希望在商品列表页面实现图片懒加载，以提升页面加载速度和用户体验。

6.2 实现步骤

标记图片：在商品列表页面中，使用 data-src 属性标记需要懒加载的图片。
创建Intersection Observer对象：在JavaScript文件中，创建一个 IntersectionObserver 对象，并定义回调函数。
观察图片元素：使用 IntersectionObserver 对象来观察这些图片元素。
性能优化：使用防抖和节流技术，优化滚动事件监听的性能。

<!-- HTML -->
<ul>
  <li>
    <img data-src="product1.jpg" src="placeholder.jpg" alt="Product 1">
  </li>
  <li>
    <img data-src="product2.jpg" src="placeholder.jpg" alt="Product 2">
  </li>
  <!-- More products -->
</ul>

// JavaScript
document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

/* CSS */
img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}
img[data-src] {
  opacity: 1;
}

七、推荐工具

在项目团队管理系统中，推荐使用 研发项目管理系统PingCode 和 通用项目协作软件Worktile。这两个系统可以帮助团队更好地协作和管理项目。

7.1 研发项目管理系统PingCode

PingCode 是一个专为研发团队设计的项目管理系统，支持敏捷开发、需求管理、缺陷跟踪等功能。它可以帮助团队提高工作效率，提升项目质量。

7.2 通用项目协作软件Worktile

Worktile 是一个通用项目协作软件，适用于各类团队和项目。它支持任务管理、时间跟踪、文件共享等功能，可以帮助团队更好地协作和沟通。

结论

通过本文的介绍，您已经了解了如何使用原生JS实现图片懒加载。Intersection Observer API 是最推荐的方法，但在老旧浏览器中，滚动事件监听也是一个可行的替代方案。在实际项目中，设置占位符、预加载与替换以及性能优化都是不可忽视的方面。最后，推荐使用 PingCode 和 Worktile 来提升项目管理的效率。