js利用数组创建图片对象

在 JavaScript 中，可以通过创建 Image 对象来加载图片，然后将 Image 对象添加到 HTML 页面中。

下面是利用数组创建多个图片对象的示例代码：

var images = []; // 定义一个空数组

// 循环创建多个图片对象
for (var i = 1; i <= 5; i++) {
  var img = new Image(); // 创建图片对象
  img.src = 'image' + i + '.jpg'; // 设置图片路径
  images.push(img); // 将图片对象添加到数组中
}

// 将数组中的图片对象添加到 HTML 页面中
var container = document.getElementById('container');
for (var j = 0; j < images.length; j++) {
  container.appendChild(images[j]);
}

在上面的代码中，先定义一个空数组 `images`，然后使用循环语句创建多个图片对象，并将它们的路径设置为 `image1.jpg` 到 `image5.jpg`。接着，将每个图片对象添加到数组中。最后，使用循环语句将数组中的每个图片对象添加到 HTML 页面中的某个容器元素中。

需要注意的是，由于图片需要加载，因此最好等到所有图片加载完成后再将它们添加到页面中。可以使用 `onload` 事件来检测图片是否加载完成。例如，在上面的代码中，如果需要等待所有图片加载完成后再显示它们，可以修改最后的循环语句如下：

var count = 0; // 计数器，记录已经加载完成的图片数量

// 定义一个函数，用于检测所有图片是否加载完成
function checkLoaded() {
  count++;
  if (count === images.length) {
    // 所有图片加载完成
    var container = document.getElementById('container');
    for (var j = 0; j < images.length; j++) {
      container.appendChild(images[j]);
    }
  }
}

// 循环创建多个图片对象
for (var i = 1; i <= 5; i++) {
  var img = new Image(); // 创建图片对象
  img.onload = checkLoaded; // 设置 onload 事件
  img.src = 'image' + i + '.jpg'; // 设置图片路径
  images.push(img); // 将图片对象添加到数组中
}

在上面的代码中，定义了一个计数器 `count`，用于记录已经加载完成的图片数量。同时，定义了一个函数 `checkLoaded`，用于检测所有图片是否加载完成。每当某个图片加载完成时，就会触发该图片的 `onload` 事件，并调用 `checkLoaded` 函数。在 `checkLoaded` 函数中，将计数器加 1，然后判断是否所有图片都已经加载完成，如果是，则将它们添加到 HTML 页面中。