Create and Load Images using a loop in Javascript

Question

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

Youre not too dumb to understand, you just need to take time to learn the language or go through tutorials. You probably need to look into "for" loops — Ian
– Ian, Commented May 30, 2013 at 0:24

Mr. Polywhirl · Accepted Answer · 2017-02-01 22:28:09Z

3

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

edited Feb 1, 2017 at 22:28

Mr. Polywhirl

49.1k12 gold badges96 silver badges147 bronze badges

answered May 30, 2013 at 0:25

Web_Designer

75.1k93 gold badges210 silver badges268 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ben Hull Over a year ago

It's worth noting that the forEach method on arrays is not supported in IE < 9 - there are ways to add it yourself, or you can use a library (underscore, jQuery) to give you similar tools.

Web_Designer Over a year ago

@Beejamin forEach is awesome. If you want browser support use a polyfill.

Ben Hull Over a year ago

Agreed - it is awesome! I look back at all the var i = 0; i < array.length; i++ in my past and weep...

dandavis Over a year ago

if you used .map instead of .forEach, you wouldn't need the extra array , push() call, or destination closure... jus sayin...

Ben Hull · Accepted Answer · 2013-05-30 01:03:13Z

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!

edited May 30, 2013 at 1:03

answered May 30, 2013 at 0:29

Ben Hull

7,6653 gold badges40 silver badges58 bronze badges

3 Comments

Web_Designer Over a year ago

You should probably avoid using a for...in loop for arrays: stackoverflow.com/questions/500504/…

Ben Hull Over a year ago

Good call. I'll amend: I was going for 'this is what's happening', rather than 'this is ready to copy/paste' - but probably better to avoid teaching that one. Good reading on that linked question, thanks.

hazard77 Over a year ago

Thank you for your response. I've never used a message board like this before. I'm really amazed and grateful for the generosity of all of you who have responded.

Shadow Man · Accepted Answer · 2013-05-30 00:32:05Z

0

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

answered May 30, 2013 at 0:32

Shadow Man

3,4621 gold badge27 silver badges37 bronze badges

1 Comment

Shadow Man Over a year ago

Keep in mind that this is really ugly and I would suggest using one of the other answers. However, this is an alternative so I thought it should be mentioned as well.

Collectives™ on Stack Overflow

Create and Load Images using a loop in Javascript

3 Answers 3

4 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related