1

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

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

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

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;
}

我看过可能描述类似事情的帖子，但恐怕我太笨了，无法理解它们。任何帮助表示赞赏。

问候

4

3 回答 3

3

这会做：

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;
});

演示

于 2013-05-30T00:25:25.900 回答
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) 可以更有效地完成，但是这种循环的优点是它可以用于任何东西（对象、数组、字符串）。在您学习时，它是一个很好的通用工具。for x in y有关循环可能导致问题的原因，请参阅@Web_designer 的链接问题。这里的 for 循环语法几乎是 JS 中数组循环的“经典香草”。

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

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

于 2013-05-30T00:29:41.337 回答
0

真的很难看，但是您可以使用onload图像的属性来运行 javascript 函数：

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

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

function loadNextImage () {
   document.getElementById( "imgToLoad" ).src = "image2.png";
}
于 2013-05-30T00:32:05.440 回答