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, May 30 '13 at 00:24

score 3 · Answer 1 · edited Feb 01 '17 at 22:28

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 01 '17 at 22:28

Mr. Polywhirl

42,981
12
84
132

answered May 30 '13 at 00:25

Web_Designer

72,308
93
206
262

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. – Ben Hull May 30 '13 at 00:31
@Beejamin `forEach` is awesome. If you want browser support use [a polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FArray%2FforEach#Compatibility). – Web_Designer May 30 '13 at 00:33
Agreed - it is awesome! I look back at all the `var i = 0; i < array.length; i++` in my past and weep... – Ben Hull May 30 '13 at 00:57
1

if you used .map instead of .forEach, you wouldn't need the extra array , push() call, or destination closure... jus sayin... – dandavis May 30 '13 at 01:06

Ben Hull · Answer 2 · 2013-05-30T01:03:13.533

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!

You should probably avoid using a `for...in` loop for arrays: http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea — Web_Designer, May 30 '13 at 00:35
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. — Ben Hull, May 30 '13 at 00:58
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. — hazard77, May 30 '13 at 19:49

score 0 · Answer 3 · answered May 30 '13 at 00:32

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 '13 at 00:32

Shadow Man

3,234
1
24
35

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. – Shadow Man May 30 '13 at 00:33

Create and Load Images using a loop in Javascript

3 Answers3

Linked