JavaScript load Images in an Array and Show in Image Source

Question

I created an array of images

function initialize(){
//add our 10 images to our array
imgArray[imageNum++] = new imageItem(imageDir + "img1.jpg");
imgArray[imageNum++] = new imageItem(imageDir + "img2.jpg");
imgArray[imageNum++] = new imageItem(imageDir + "img3.jpg");

}
var totalImgs = imgArray.length;

I then create a function that is linked with a in my html file:

<button id="startButton" onclick="startImage()">Start</button>

function startImage(){

    document.getElementById("pic").setAttribute("src", imgArray[0].src);
}

My image tag : <img id="pic" src="" height="300" width="500" border="0" alt="image"> This fails to update my img object, i used firebug to look at the DOM and my array is being populated properly but the img src is not be set?

is imageNum defined? If it's not defined then imageNum++ will return NaN.. also, is imgArray defined? if it's not, then imgArray[n] will throw exception. And you probably should use imgArray.push(new imageItem(imageDir + "armory.jpg")).. — valentinas
– valentinas, Commented Feb 15, 2012 at 2:30
in startImage() you call imgArray[0] - but imgArray is not recognized from inside the function! — Nir Alfasi
– Nir Alfasi, Commented Feb 15, 2012 at 2:32
What is imageItem? Are you certain it returns an HTMLImageElement? And are you certain your imageDir is correct? — user1106925
– user1106925, Commented Feb 15, 2012 at 2:41
You may need to provide more details so we can help (i.e. more of your code). Otherwise, I have to ask questions like did you call initialize()? — Laurent
– Laurent, Commented Feb 15, 2012 at 3:03

ashleedawg · Accepted Answer · 2022-05-14 09:55:38Z

3

Load multiple images sounds like a functionality that you might want to user in different projects. I would suggest to create a function that can process your images array and append the image object to a <div>:

var images = [
    'path/to/image1.png',
    'path/to/image2.png',
    'path/to/image3.png',
    'path/to/image4.png',
    'path/to/image5.png'
];

function loadImages(imgArr){
    for(var i=0; i< imgArr.length; i++) {
        console.log(imgArr[i]);
        var img = new Image();
            img.src = imgArr[i];
        document.getElementById('output').appendChild(img);
    }
}
                
loadImages(images);

You can also invoke the loadImage() function from your button:

<button onclick="loadImages(images)">Start</button>

edited May 14, 2022 at 9:55

ashleedawg

21.9k9 gold badges82 silver badges120 bronze badges

answered Feb 15, 2012 at 3:35

appcropolis

2762 silver badges8 bronze badges

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

Comments

RobG · Accepted Answer · 2012-02-15 03:20:48Z

2

Your example is incomplete. You need to show what the imageItem constructor does (and it's convention to use a capital letter for the first character in a constructor), so:

function ImageItem(src) {
  this.image = new Image();
  this.src = src.
}

should do the job here. You also seem to want imgArray as a global, so declare it as one:

var imgArray;

function initialize(){
    //add our 10 images to our array 
    imgArray[imageNum++] = new imageItem(imageDir + "armory.jpg");

Assigning an array literal is a bit easier:

    imgArray = [ new ImageItem(imageDir + "armory.jpg"),
                 new ImageItem(imageDir + "eddy.jpg"),
                 ...
                 new ImageItem(imageDir + "...")
    ];
}

var totalImgs = imgArray.length;

Though I can't see why you don't just assign the array literal directly and not bother with the wrapper function. The startImage function can be a bit tidier:

function startImage(){
    document.getElementById("pic").src = imgArray[0].src;
}

Accessing element properties directly is more reliable across browsers and less to type than using setAttribute (which has quirks in some browsers).

answered Feb 15, 2012 at 3:20

RobG

148k32 gold badges180 silver badges216 bronze badges

2 Comments

Warz Over a year ago

The ImageItem function and the array being declared as a global helped alot. Thanks

Warz Over a year ago

can you show how i can assign the array without the wrapper function?

Prasad Rajapaksha · Accepted Answer · 2012-02-15 03:20:00Z

0

Modify your javascript function like this and see.

function startImage(){

    document.getElementById("pic").src =  imgArray[0].src;
}

answered Feb 15, 2012 at 3:20

Prasad Rajapaksha

6,18810 gold badges40 silver badges53 bronze badges

Collectives™ on Stack Overflow

JavaScript load Images in an Array and Show in Image Source

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related