原生JS实现图片懒加载效果，拒绝等待，拥抱丝滑体验！

前端

2023-12-02 11:58:23

懒加载的原理与优势

懒加载是一种延迟加载技术，它可以将图片的加载时机推迟到需要显示时才进行。这样，就可以避免在页面加载初期加载所有图片，从而减少页面的初始加载时间。同时，当用户滚动页面时，懒加载会自动加载出现在视口中的图片，从而实现按需加载的效果。

懒加载技术具有以下优势：

提高网页加载速度：减少初始加载图片的数量，从而缩短页面加载时间。
节省带宽资源：只加载出现在视口中的图片，避免浪费带宽资源。
提升用户体验：用户无需等待所有图片加载完成即可看到页面内容，从而提高用户体验。

原生JS实现图片懒加载

1. 准备工作

在开始之前，我们需要准备以下工作：

HTML代码：

<img id="myImage" src="placeholder.png" data-src="image.jpg" alt="Image description">

在这个HTML代码中，我们使用了一个<img>元素来显示图片。其中，src属性指定了图片的占位符（placeholder），而data-src属性指定了图片的真实地址。

JavaScript代码：

// 获取图片元素
const image = document.getElementById('myImage');

// 获取图片的真实地址
const src = image.getAttribute('data-src');

// 创建一个新的Image对象
const newImage = new Image();

// 设置Image对象的src属性
newImage.src = src;

// 监听Image对象的load事件
newImage.addEventListener('load', function() {
  // 图片加载完成后，将Image对象的src属性赋值给图片元素的src属性
  image.src = newImage.src;
});

2. 懒加载逻辑

在准备工作完成后，我们可以编写懒加载的逻辑代码了：

// 获取所有需要懒加载的图片元素
const images = document.querySelectorAll('img[data-src]');

// 遍历图片元素
for (let i = 0; i < images.length; i++) {
  const image = images[i];

  // 获取图片的真实地址
  const src = image.getAttribute('data-src');

  // 创建一个新的Image对象
  const newImage = new Image();

  // 设置Image对象的src属性
  newImage.src = src;

  // 监听Image对象的load事件
  newImage.addEventListener('load', function() {
    // 图片加载完成后，将Image对象的src属性赋值给图片元素的src属性
    image.src = newImage.src;
  });

  // 将图片的占位符src属性设置为真实的图片地址
  image.src = src;
}

在这段代码中，我们首先获取了所有需要懒加载的图片元素。然后，我们遍历这些图片元素，并为每个图片元素创建一个新的Image对象。接下来，我们设置Image对象的src属性为图片的真实地址，并监听Image对象的load事件。最后，我们将Image对象的src属性赋值给图片元素的src属性，从而实现图片的懒加载效果。