js前端实现图片懒加载(lazyload)的两种方式

下面就来详细讲解“js前端实现图片懒加载(lazyload)的两种方式”的完整攻略。

懒加载是什么

图片懒加载(lazyload)，也叫延迟加载，是一种优化网页性能的方式。它的原理就是先加载页面上可见区域的内容，而当用户滚动页面直到某个未加载的区域出现在视口时，再去加载该区域的内容。这种方式可以减少页面加载时的HTTP请求数量，加快页面渲染速度。

两种实现方式

1. Intersection Observer API

Intersection Observer API是浏览器原生提供的一种API，用于监听元素与视口是否交叉的状态。通过Intersection Observer API，我们可以监听到元素的进入和离开视口，进而达到懒加载的效果。

以下是一个基于Intersection Observer实现的图片懒加载的示例代码：

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

<script>
  const images = document.querySelectorAll('.lazy');
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.intersectionRatio > 0) {
        // 加载图片
        entry.target.src = entry.target.dataset.src;
        // 停止监听该图片
        observer.unobserve(entry.target);
      }
    });
  });
  // 监听每个懒加载图片的状态
  images.forEach(image => {
    observer.observe(image);
  });
</script>

上述代码中，我们首先获取到所有的懒加载图片元素，并且创建了一个IntersectionObserver的实例。然后，我们通过调用实例的observe()方法，监听了每个懒加载图片元素的状态。当图片进入视口后，Intersection Observer API会触发回调函数，我们在回调函数中将图片的data-src替换为src，这样图片就会被加载出来。

2. scroll事件监听

scroll事件的监听方式是使用最广泛的一种懒加载方式，其原理就是监听页面的滚动事件，当页面滚动到某个未加载的区域时，再去加载该区域的内容。

以下是一个基于scroll事件监听实现的图片懒加载的示例代码：

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

<script>
  function lazyload(images) {
    // 获取页面滚动的高度
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 获取窗口的高度
    const windowHeight = document.documentElement.clientHeight || window.innerHeight;
    // 遍历每个懒加载图片元素
    for (let i = 0; i < images.length; i++) {
      const image = images[i];
      // 判断图片是否在可见区域内
      if (image.offsetTop < scrollTop + windowHeight) {
        // 加载图片
        image.src = image.dataset.src;
        // 删除已处理的图片，减少监听次数
        images.splice(i, 1);
        i--;
      }
    }
  }
  const images = document.querySelectorAll('.lazy');
  // 在页面滚动时触发当前正在执行的函数
  document.addEventListener('scroll', function() {
    lazyload(Array.from(images));
  });
</script>

上述代码中，我们首先获取到所有的懒加载图片元素，并且给scroll事件添加了监听器。每次滚动时，我们调用lazyload()函数，遍历每个懒加载图片元素。如果图片处于可见区域内，就将其data-src替换为src，当图片被加载后，我们要把它从数组中删除，避免下次重复监听。

总结

以上就是两种js前端实现图片懒加载的方式：Intersection Observer API和scroll事件监听。其中，Intersection Observer API是一种新的API，号称能够提高页面性能，但是IE浏览器不支持，需要注意兼容性问题。而scroll事件监听则是一种历史比较久远的方式，兼容性较好，但是由于需要频繁监听scroll事件，会有一定的性能损耗。对于两种方式，我们需要根据实际的项目需求做出选择，以达到最佳的效果。