JS实现图片预加载无需等待

2023年6月11日上午6:59 • JavaScript

为了使页面加载更快，我们可以在页面载入之前就预先加载所需要的图片资源。这个过程称为“图片预加载”。当用户访问页面时，这些图片就已经在本地缓存中了，从而不会出现因等待加载而导致页面卡顿的情况。下面是JS实现图片预加载无需等待的完整攻略。

1. 获取图片的URL列表

首先，我们需要获取要预加载的图片列表。这个列表可以是一个数组，也可以通过DOM元素获取。下面是一个数组形式的图片URL列表示例：

const imgList = [
  '../images/img1.jpg',
  '../images/img2.jpg',
  '../images/img3.jpg',
  '../images/img4.jpg',
  '../images/img5.jpg',
];

2. 创建图片对象

接下来，我们需要通过JS创建Image对象，以便在页面加载之前预加载图片。代码如下：

const preLoadImage = (url) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = url;
    img.onload = resolve;
    img.onerror = reject;
  })
}

imgList.forEach((url) => {
  preLoadImage(url);
});

上述代码使用了ES6的promise机制来管理图片加载的异步操作。

3. 预加载成功后执行操作

当所有图片资源预加载完成之后，我们需要在页面中访问这些图片或者执行一些其他操作。我们可以使用Promise.all来实现对所有promise对象的观察和响应。代码如下：

Promise.all(imgList.map((url) => preLoadImage(url)))
  .then(() => {
    // 预加载成功后执行其他操作
  })
  .catch((error) => {
    // 预加载失败时的操作
  });

上述代码中，我们将所有图片URL映射为promise对象，然后通过Promise.all方法将它们组合在一起，以便等待所有图片都预加载完成后再执行后续操作。

示例1：实现简单的图片预加载

const preLoadImage = (url) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = url;
    img.onload = resolve;
    img.onerror = reject;
  })
}

const imgList = [
  '../images/img1.jpg',
  '../images/img2.jpg',
  '../images/img3.jpg',
];

Promise.all(imgList.map((url) => preLoadImage(url)))
  .then(() => {
    console.log('所有图片预加载完成');
    // 其他操作
  })
  .catch((error) => {
    console.log('预加载失败：' + error);
  });

示例2：预加载图片后动态生成标签

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>预加载图片后动态生成标签</title>
  <style>
    img {
      width: 300px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
    const preLoadImage = (url) => {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = url;
        img.onload = resolve;
        img.onerror = reject;
      })
    }

    const imgList = [
      '../images/img1.jpg',
      '../images/img2.jpg',
      '../images/img3.jpg',
    ];

    Promise.all(imgList.map((url) => preLoadImage(url)))
      .then(() => {
        console.log('所有图片预加载完成');
        const container = document.querySelector('#container');
        imgList.forEach((src) => {
          const img = document.createElement('img');
          img.setAttribute('src', src);
          container.appendChild(img);
        });
      })
      .catch((error) => {
        console.log('预加载失败：' + error);
      });
  </script>
</body>
</html>

上述代码中，Promise.all将它们组合在一起，等待所有图片都预加载完成后再执行后续操作。在本例中，预加载成功后动态创建了一个图片标签，并将其添加到页面中显示。

以上就是JS实现图片预加载无需等待的完整攻略及两个示例的详细讲解。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现图片预加载无需等待 - Python技术站