手工构建JS-图片懒加载，搞懂工作原理提升开发效率！

2023-09-16 12:27:11

前言

在学习图片懒加载之前，我们先看看什么是懒加载。

1. 什么是懒加载？

懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器都吃不消了，怎么办呢？是不是应该只加载我们当前屏幕能看到的部分，其他的等需要的时候再加载，这样不就可以减轻浏览器的负担了吗？这就是懒加载的精髓所在。

2. 图片懒加载的优势

图片懒加载的优势主要体现在以下几个方面：

提升页面加载速度：页面上图片资源往往比较大，如果采用传统的方式加载所有图片，会大大拖慢页面加载速度，使用图片懒加载可以有效避免这种情况。
减少带宽消耗：图片懒加载可以减少不必要的图片加载，从而减少带宽消耗，尤其是在移动端网络环境下，可以节省流量。
提升用户体验：页面加载速度慢，用户体验自然会受到影响，图片懒加载可以改善页面加载速度，从而提升用户体验。

3. 手写JS图片懒加载

现在我们开始手写一个JavaScript图片懒加载函数，我们称之为lazyLoad()。

function lazyLoad() {
  // 获取页面上所有需要懒加载的图片元素
  const images = document.querySelectorAll("img[data-src]");

  // 遍历所有图片元素
  images.forEach((image) => {
    // 获取图片的data-src属性值，该属性值就是图片的真实地址
    const src = image.getAttribute("data-src");

    // 检查图片是否在当前视口内
    const isIntersecting = isElementIntersecting(image);

    // 如果图片在当前视口内，则加载图片
    if (isIntersecting) {
      image.setAttribute("src", src);
    }
  });
}

在这个函数中，我们首先获取页面上所有需要懒加载的图片元素，然后遍历这些图片元素，获取它们的data-src属性值，即图片的真实地址。接下来，我们检查图片是否在当前视口内，如果在，则加载图片。

3.1 判断图片是否在当前视口内

我们使用IntersectionObserver API来判断图片是否在当前视口内。

function isElementIntersecting(element) {
  // 创建一个IntersectionObserver对象
  const observer = new IntersectionObserver((entries) => {
    // 遍历entries数组
    entries.forEach((entry) => {
      // 如果图片在当前视口内，则加载图片
      if (entry.isIntersecting) {
        const image = entry.target;
        const src = image.getAttribute("data-src");
        image.setAttribute("src", src);
      }
    });
  });

  // 观察图片元素
  observer.observe(element);
}