CODEWITHSUNDEEP
javascripthtml
secondbreakfast
secondbreakfast

Reputation: 4374

Images wont load in html page via javascript

I have an image gallery html page with a div that gets populated from a javascript file.

Here is the html page

<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
<title>Gallery</title>
</head>
<body>

<div id="example"></div>


<script src="js/gallery.js"></script>

</body>
</html>

and here is the gallery.js file

var images = [ "img/mccc/001.jpg", "img/mccc/002.jpg", "img/mccc/003.jpg",
    "img/mccc/004.jpg", "img/mccc/005.jpg", "img/mccc/006.jpg",
    "img/mccc/007.jpg", "img/mccc/008.jpg", "img/mccc/009.jpg",
    "img/mccc/010.jpg", "img/mccc/011.jpg", "img/mccc/012.jpg",
    "img/mccc/013.jpg", "img/mccc/014.jpg", "img/mccc/015.jpg",
    "img/mccc/016.jpg", "img/mccc/017.jpg", "img/mccc/018.jpg",
    "img/mccc/019.jpg", "img/mccc/020.jpg", "img/mccc/021.jpg",
    "img/mccc/022.jpg", "img/mccc/023.jpg", "img/mccc/024.jpg",
    "img/mccc/025.jpg" ];

var code = "";

for ( var i in images) {
    code += '<img src="' + i + '" alt="image not available">';
}

document.getElementById("example").innerHTML = code;

the 'img' folder which contains the 'mccc' folder is in the same directory as my gallery.html and 'js' folder, and yes, the images named 001.jpg-025.jpg are in the 'mccc' folder.

This is what I get when I load the page

enter image description here

Any ideas?

Upvotes: 0

Views: 105

Answers (4)

gwcoffey
gwcoffey

Reputation: 5921

Change this:

for ( var i in images) {
   code += '<img src="' + i + '" alt="image not available">';
}

To this:

for ( var i = 0; i < images.length; i++) {
   code += '<img src="' + images[i] + '" alt="image not available">';
}

The for ( var foo in bar ) construct doesn't do what you think it does. It iterates the properties of the object, which in the case of the array are unordered array indices, not array values.

Note: Several answers suggest you keep the for...in syntax and index your array properly. This will probably work in the basic case, but it is not recommended for two reasons:

  1. Iterting an array in this way is not guaranteed to go in index order. So if you want your images in the same order as they appear in the array, you could get burned.
  2. The for...in syntax iterates all properties of the array, not just elements in the array. A base array like you have here, with no magic in play from third party libraries, etc..., does not have any additional properties. But it might, and then your code would break.

The right way to iterate an array is with a standard for loop. See here which says:

for..in should not be used to iterate over an Array where index order is important. Array indexes are just enumerable properties with integer names and are otherwise identical to general Object properties. There is no guarantee that for...in will return the indexes in any particular order and it will return all enumerable properties, including those with non–integer names and those that are inherited.

Because the order of iteration is implementation dependent, iterating over an array may not visit elements in a consistent order. Therefore it is better to use a for loop with a numeric index (or Array.forEach or the non-standard for...of loop) when iterating over arrays where the order of access is important.

Upvotes: 3

Tyler
Tyler

Reputation: 183

Use the developer tools that come with the browser to further investigate - sometimes the paths get messed up depending on the url of the file loading the javascript. I would put the full URL to the pictures in the array - that way there isnt confusion.

Upvotes: 1

Vedant Terkar
Vedant Terkar

Reputation: 4682

Just Change:

for ( var i in images) {
    code += '<img src="' + i + '" alt="image not available">';
}

to

for ( var i in images) {
    code += '<img src="' + images[i] + '" alt="image not available">';
}

Upvotes: 3

rhino
rhino

Reputation: 13881

When you use for (var i in images), i becomes the index, not the element itself. Try: 

for (var i in images) {
    code += '<img src="' + images[i] + '" alt="image not available">';
}

Upvotes: 4

Related Questions