在 Javascript 中使用循环创建和加载图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16825964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create and Load Images using a loop in Javascript
提问by hazard77
my apologies but I am a severe novice.
我很抱歉，但我是一个严重的新手。
please can someone tell me how it is possible to use a loop to load images?
请有人告诉我如何使用循环加载图像？
i.e. rewrite the following type of code to use a loop to automate the process.
即重写以下类型的代码以使用循环来自动化该过程。
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;
}
I have seen may posts that describe similar things but i'm afraid i'm too dumb to understand them. Any help appreciated.
我看过可能描述类似事物的帖子，但我恐怕我太笨了，无法理解它们。任何帮助表示赞赏。
Regards
问候
回答by Web_Designer
This would do:
这会做：
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;
});回答by Ben Hull
For your example, you'll need some way of knowing what each of the image paths/file names are (since they aren't IMG_001.jpg, 002.jpg, etc). An easy, but low-tech way is to pack all the file names into an array to act as our source information:
对于您的示例，您需要某种方式来了解每个图像路径/文件名是什么（因为它们不是 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'];
Then, it's a matter of looping over each element in that array, and creating an image element for each one. We'll create the image element, and pack it into the final array in one step:
然后，循环遍历该数组中的每个元素，并为每个元素创建一个图像元素。我们将创建图像元素，并一步将其打包到最终数组中：
//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);
This is code written to be easy to understand, not be efficient. In particular, the for (i in imageFiles) could be done more efficiently, but the advantage of this type of loop is that it can be used on anything (objects, arrays, strings). It's a good general purpose tool while you're learning.See @Web_designer's linked question for reasons the for x in yloop can cause problems. The for loop syntax here is pretty much the 'classic vanilla' of array loops in JS.
这是为了易于理解而编写的代码，而不是高效的。 特别是，for (i in imageFiles) 可以更有效地完成，但这种类型的循环的优点是它可以用于任何东西（对象、数组、字符串）。在您学习时，它是一个很好的通用工具。有关for x in y循环可能导致问题的原因，请参阅@Web_designer 的链接问题。这里的 for 循环语法几乎是 JS 中数组循环的“经典原版”。
Also, if your image file names are always going to be numeric and sequential, you could take advantage of that, but 'calculating' them, instead of pre-storing them.
此外，如果您的图像文件名总是数字和顺序，您可以利用这一点，但“计算”它们，而不是预先存储它们。
Let us know if there's anything you want more detail on!
如果您想了解更多详情，请告诉我们！
回答by Shadow Man
Really ugly, but you could use the onloadattribute of the image to run a javascript function:
真的很难看，但您可以使用onload图像的属性来运行 javascript 函数：
<img id="imgToLoad" onload="loadNextImage();" src="image1.png"/>
And that function could be responsible for loading the next image:
该函数可以负责加载下一个图像：
function loadNextImage () {
document.getElementById( "imgToLoad" ).src = "image2.png";
}
