RxJS 实现图片懒加载优化方案-JavaScript中文网-JavaScript教程资源分享门户

前言

在网页内容过大，需要加载大量图片的情况下，图片懒加载技术是很有必要的。它可以帮助我们减少页面加载时间，提高用户体验。RxJS 是一个流畅且易于使用的 JavaScript 函数响应式编程库，它可以帮助我们更好地实现图片懒加载。本文将介绍如何通过 RxJS 实现一种图片懒加载优化方案。

实现思路

实现图片懒加载的核心思路是，先将图片的 src 属性设置为一个占位符，然后在图片出现在用户的可视范围内时才真正加载图片。实现这个思路有两种方法：

判断图片是否在可视范围内这种方法是比较常见的一种实现方式，我们需要判断图片是否在用户的可视区域内，来确定是否需要加载图片。但是这种方法有一个缺点，即当用户滚动页面时会触发大量的事件监听，不利于性能。
判断图片距离可视范围的位置这种方法可以通过判断图片距离用户可视范围的位置来确定是否需要加载图片。这种方法的优点是只需要监听页面滚动事件，不会像第一种方法那样频繁触发事件。同时，它可以帮助我们避免鬼象现象，即图片虽然在可视范围内，但由于缓存等原因，图片可能没有立即加载出来，从而导致页面出现空白的情况。

本文将使用第二种方法来实现图片懒加载。

实现步骤

设置占位符

首先，我们需要使用一个占位符来代替图片。在 img 元素中，我们可以使用 src 属性设置占位符。

<img src="placeholder.png" data-src="realimage.png" />

这里，placeholder.png 是占位符图片， data-src 属性是真正要加载的图片地址。现在，让我们来写一段代码来将 src 属性设置为占位符。

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

Array.from(images).forEach((img) => {
  img.setAttribute('src', 'placeholder.png');
});

判断图片距离可视范围的位置

现在，我们需要判断图片是否距离可视范围的位置足够近，从而决定是否需要加载图片。在判断图片位置时，我们需要使用 getBoundingClientRect() 方法。该方法返回一个矩形对象，该矩形描述了元素的所有边缘的位置。我们可以使用 window.innerHeight 和 window.innerWidth 获取浏览器窗口的高度和宽度。

// javascriptcn.com 代码示例
// 判断元素是否在视口内
function isInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

使用 RxJS 实现图片懒加载

现在我们已经有了判断图片是否在可视范围内的工具，现在让我们来看看如何使用 RxJS 实现图片懒加载。

首先，我们需要创建一个可观察对象来监听滚动事件。然后，我们需要过滤出在视口内的图片，然后设置真正的图片地址。

// javascriptcn.com 代码示例
const images = document.querySelectorAll('img[data-src]');

Rx.Observable.fromEvent(window, 'scroll')
  .debounceTime(100)
  .map(() => Array.from(images))
  .flatten()
  .distinct()
  .filter((img) => isInViewport(img))
  .subscribe((img) => {
    img.setAttribute('src', img.getAttribute('data-src'));
    img.removeAttribute('data-src');
  });

这段代码将在滚动事件上创建一个可观察对象，并将其指定为每 100 毫秒执行一次。然后使用 map() 操作符将获取到的所有图片包装成一个数组，并将其扁平化。通过 distinct() 操作符，我们将按照其内存地址去除重复的图片元素，最后过滤出在视口内的图片并设置其真正的图片地址。

注意事项

因为要监听浏览器滚动，因此这个方案可能会影响页面的性能。在实际应用中，需要根据实际情况进行调整。
在使用 RxJS 时，要确保正确地处理订阅和取消订阅。

示例代码

下面是一个完整的 RxJS 实现图片懒加载的例子。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>RxJS Picture Lazy Loading</title>
  <style>
    .container {
      margin: 0 auto;
      width: 80%;
    }

    .img-container {
      margin-bottom: 20px;
      text-align: center;
    }

    .img-container img {
      max-width: 100%;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="img-container">
      <img src="placeholder.png" data-src="https://picsum.photos/id/10/1600/900" alt="Image 1" />
    </div>
    <div class="img-container">
      <img src="placeholder.png" data-src="https://picsum.photos/id/20/1600/900" alt="Image 2" />
    </div>
    <div class="img-container">
      <img src="placeholder.png" data-src="https://picsum.photos/id/30/1600/900" alt="Image 2" />
    </div>
    <div class="img-container">
      <img src="placeholder.png" data-src="https://picsum.photos/id/40/1600/900" alt="Image 2" />
    </div>
    <div class="img-container">
      <img src="placeholder.png" data-src="https://picsum.photos/id/50/1600/900" alt="Image 2" />
    </div>
    <div class="img-container">
      <img src="placeholder.png" data-src="https://picsum.photos/id/60/1600/900" alt="Image 2" />
    </div>
    <div class="img-container">
      <img src="placeholder.png" data-src="https://picsum.photos/id/70/1600/900" alt="Image 2" />
    </div>
    <div class="img-container">
      <img src="placeholder.png" data-src="https://picsum.photos/id/80/1600/900" alt="Image 2" />
    </div>
    <div class="img-container">
      <img src="placeholder.png" data-src="ttps://picsum.photos/id/90/1600/900" alt="Image 2" />
    </div>
    <div class="img-container">
      <img src="placeholder.png" data-src="https://picsum.photos/id/100/1600/900" alt="Image 2" />
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/rxjs/bundles/rxjs.umd.min.js"></script>
  <script>
    // 判断元素是否在视口内
    function isInViewport(el) {
      const rect = el.getBoundingClientRect();
      return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
      );
    }

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

    Rx.Observable.fromEvent(window, 'scroll')
      .debounceTime(100)
      .map(() => Array.from(images))
      .flatten()
      .distinct()
      .filter((img) => isInViewport(img))
      .subscribe((img) => {
        img.setAttribute('src', img.getAttribute('data-src'));
        img.removeAttribute('data-src');
      });
  </script>
</body>

</html>

总结

在本文中，我们介绍了使用 RxJS 实现图片懒加载优化方案。使用基于流的方法，我们可以避免页面性能问题，并在图片显示时才加载对应的图片，提升用户体验。需要注意的是，由于图片懒加载本身已经比较高级，这里介绍的方案有些复杂，因此需要按需要进行完善和调整。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f9d7adf6b2d6eab3133de4