一文搞懂JavaScript如何实现图片懒加载

图片懒加载是一种优化网页性能的技术，可以提升加载速度，改善用户体验。本文将详细讲解如何通过JavaScript实现图片懒加载。

什么是图片懒加载？

图片懒加载是一种延迟加载图片的方法，也称为Lazy Loading。当用户滚动页面，懒加载技术会根据图片距离浏览器窗口的距离以及当前的滚动位置，判断是否需要加载该图片，从而提高了页面的加载速度。

如何实现图片懒加载？

以下是实现图片懒加载的步骤：

1. HTML结构

在HTML代码中，我们需要将所有的图片标签的src属性改为data-src属性，如下所示：

<img data-src="image-1.jpg" alt="image-1">
<img data-src="image-2.jpg" alt="image-2">
<img data-src="image-3.jpg" alt="image-3">

2. CSS样式

我们需要为这些待加载的图片设置一个默认的占位符，使页面的布局不会因为图片加载而发生变化。

img {
  width: 100%;
  height: auto;
  display: block;
  background: #ddd;
}

3. JavaScript代码

实现图片懒加载的核心代码是JavaScript部分。我们需要监听页面的滚动事件，在图片进入视口时动态加载图片。

以下是JavaScript实现图片懒加载的代码：

function lazyLoad() {
  const images = document.querySelectorAll('img[data-src]');

  images.forEach((img) => {
    if (img.offsetTop < window.innerHeight + window.pageYOffset) {
      img.setAttribute('src', img.getAttribute('data-src'));
      img.removeAttribute('data-src');
    }
  });
}

window.addEventListener('scroll', lazyLoad);

在上面的代码中，我们首先获取所有带有data-src属性的图片元素。接下来，我们遍历所有图片元素，判断其是否已经进入视口，如果是则将其data-src属性的值赋给src属性，并移除data-src属性，从而实现图片懒加载的效果。最后，我们将lazyLoad函数作为scroll事件的回调函数，使每次页面滚动都会触发lazyLoad函数。

示例说明

以下是两个示例，分别演示了如何使用JavaScript实现图片懒加载。

示例一

代码示例地址：https://codepen.io/zaphoo/pen/KKKNQay

在这个示例中，我们使用了一个简单的纯JavaScript实现的图片懒加载库lozad.js。在页面中引入lozad.js之后，我们只需要将img标签的data-src属性设置为图片的真实路径，即可实现图片懒加载。

<img class="lozad" data-src="image-1.jpg" alt="image-1">
<img class="lozad" data-src="image-2.jpg" alt="image-2">
<img class="lozad" data-src="image-3.jpg" alt="image-3">

<script src="https://cdn.jsdelivr.net/npm/lozad@ latest/dist/lozad.min.js"></script>
<script>
  const observer = lozad();
  observer.observe();
</script>

示例二

代码示例地址：https://codepen.io/zaphoo/pen/OJVbLZO

在这个示例中，我们使用了一个轻量级的JavaScript图片懒加载库-哩呵Layzr.js。

首先，我们需要在页面中引入哩呵Layzr.js。

<script src="https://cdn.jsdelivr.net/npm/layzr.js@latest/dist/layzr.min.js"></script>

接下来，我们需要将所有待加载的图片标签的data-src属性设置为图片的真实路径。

<img data-src="image-1.jpg" alt="image-1">
<img data-src="image-2.jpg" alt="image-2">
<img data-src="image-3.jpg" alt="image-3">

最后，我们需要在JavaScript中初始化哩呵Layzr.js，并添加需要懒加载的图片元素。

const instance = Layzr({
  threshold: 0,
});

instance.update().check().handlers(true);

const images = document.querySelectorAll('img[data-src]');
images.forEach((img) => {
  instance.addItems(img);
});

上面的代码中，我们首先通过Layzr构造函数创建了一个实例，并指定了threshold为0，表示图片距离视口超过0像素时开始懒加载。接下来，我们使用update、check、handlers等方法初始化了实例。最后，我们使用querySelectorAll方法获取所有待懒加载的图片元素，使用addItems方法将这些元素添加到Layzr实例中，实现了图片懒加载的效果。

结论

通过以上的步骤和示例，我们可以轻松地实现图片懒加载，从而提高网页的性能和用户体验。