Question

我很抱歉，但我是一个严厉的新手。

请有人告诉我如何使用循环加载图像？

即。重写以下类型的代码以使用循环来自动化该过程。

function loadimages() {
    pic00 = new Image;
    pic00.src = "images/IMG_0019.jpg";

    pic01 = new Image;
    pic01.src = "images/IMG_0020.jpg";

    pic02 = new Image;
    pic02.src = "images/IMG_0021.jpg";

    pic03 = new Image;
    pic03.src = "images/IMG_0022.jpg";

    pictures = new Array(4);
    pictures[0] = pic00;
    pictures[1] = pic01;
    pictures[2] = pic02;
    pictures[3] = pic03;
}

我看过可能会描述相似内容的帖子，但我担心我太愚蠢而无法理解它们。任何帮助赞赏。

此致

Answer 1

这样做：

var URLs = [
  "http://placehold.it/128x128.png/f00/400?text=Red",
  "http://placehold.it/128x128.png/0f0/040?text=Green",
  "http://placehold.it/128x128.png/00f/004?text=Blue",
  "http://placehold.it/128x128.png/ff0/440?text=Yellow"
];

var imgs = URLs.map(function(URL) {
  var img = new Image();
  img.src = URL;
  document.body.appendChild(img);
  return img;
});

Demo

Answer 2

对于您的示例，您需要某种方式来了解每个图像路径/文件名是什么（因为它们不是IMG_001.jpg，002.jpg等）。一种简单但技术含量低的方法是将所有文件名打包成一个数组，作为我们的源信息：

//Pack the image filenames into an array using Array shorthand
var imageFiles = ['IMG_0019.jpg', 'IMG_0020.jpg', 'IMG_0021.jpg', 'IMG_0022.jpg'];

然后，循环遍历该数组中的每个元素，并为每个元素创建一个图像元素。我们将创建图像元素，并在一步中将其打包到最终数组中：

//Loop over an array of filenames, and create an image for them, packing into an array:
var pictures = []; //Initialise an empty array

for (var i = 0, j = imageFiles.length; i < j; i++) {
    var image = new Image; //This is a placeholder
    image.src = 'images/' + imageFiles[i]; //Set the src attribute (imageFiles[i] is the current filename in the loop)
    pictures.push(image); //Append the new image into the pictures array
}

//Show the result:
console.log(pictures);

这是编写的代码，易于理解，效率不高。特别是，for（i in imageFiles）可以更有效地完成，但这种类型的循环的优点是它可以用于任何东西（对象，数组，字符串）。在学习的过程中，它是一个很好的通用工具。请参阅@ Web_designer的链接问题，原因是for x in y循环可能导致问题。这里的for循环语法几乎就是JS中数组循环的“经典香草”。

此外，如果您的图像文件名始终是数字和连续的，您可以利用它，但“计算”它们，而不是预先存储它们。

如果您想了解更多细节，请告诉我们！

Answer 3

真的很丑，但您可以使用图片的onload属性来运行javascript函数：

<img id="imgToLoad" onload="loadNextImage();" src="image1.png"/>

该功能可能负责加载下一张图片：

function loadNextImage () {
   document.getElementById( "imgToLoad" ).src = "image2.png";
}

使用Javascript中的循环创建和加载图像

3 个答案: