多张图片加载完后执行

2023-12-22 23:28:38

前言

在网页开发中，通常需要在多张图片全部加载完成后执行某些操作，例如显示画廊或开始动画。本文将探讨两种实现此功能的方法：使用 JavaScript 和原生 HTML。

使用 JavaScript

JavaScript 提供了一种直接的方法来监听图片的加载事件。我们可以为每张图片添加一个 onload 事件侦听器，当该图片加载完成后，该侦听器将触发。一旦所有图片都加载完成，侦听器将执行指定的回调函数。

const imgSrc = ['image1.jpg', 'image2.png', 'image3.gif'];
const callback = () => {
  // 所有图片已加载，执行回调
};

// 遍历图片数组，为每张图片添加 onload 事件侦听器
for (let i = 0; i < imgSrc.length; i++) {
  const img = new Image();
  img.onload = callback;
  img.src = imgSrc[i];
}

使用原生 HTML

原生 HTML 也可以用于多张图片加载完后执行特定操作。我们可以使用<picture>和<img>元素结合来实现。<picture>元素允许我们指定不同分辨率的图像，而<img>元素是图像的实际表示。

我们可以为<picture>元素添加一个 onload 事件侦听器。当所有 <img> 元素加载完成后，该侦听器将触发。

<picture>
  <source srcset="image1-small.jpg" media="(max-width: 600px)">
  <source srcset="image1-medium.jpg" media="(min-width: 600px) and (max-width: 1200px)">
  <source srcset="image1-large.jpg" media="(min-width: 1200px)">
  <img src="image1-large.jpg" onload="callback()">
</picture>

<picture>
  <source srcset="image2-small.jpg" media="(max-width: 600px)">
  <source srcset="image2-medium.jpg" media="(min-width: 600px) and (max-width: 1200px)">
  <source srcset="image2-large.jpg" media="(min-width: 1200px)">
  <img src="image2-large.jpg">
</picture>

<picture>
  <source srcset="image3-small.jpg" media="(max-width: 600px)">
  <source srcset="image3-medium.jpg" media="(min-width: 600px) and (max-width: 1200px)">
  <source srcset="image3-large.jpg" media="(min-width: 1200px)">
  <img src="image3-large.jpg">
</picture>