Create and Load Images using a loop in Javascript

2020-08-03 04:58发布

问题:

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

回答1:

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

Demo



回答2:

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:

//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 y loop can cause problems. The for loop syntax here is pretty much the 'classic vanilla' of array loops in 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!



回答3:

Really ugly, but you could use the onload attribute of the image to run a javascript function:

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