Javascript for loop not looping correctly

Question

This is the Js Fiddler of the question because until it's run i don't see how this could possibly make sense. Loop of img src and i loop through them and place them in an img.src and load them and then append to an element. I have tried various other methods that just seems to not work and i have no idea why this would happen. Is it a problem with jsfiddler or is my code incorrect?

http://jsfiddle.net/shavyg2/GsQtn/embedded/result/

    /*Slide show*/
var container=$(".imageContainer");

var imageList=["http://blogs.adobe.com/captivate/files/2011/09/HTML5.jpg",               "http://www.hanselman.com/blog/content/binary/Windows-Live-Writer/HTML5-Support-for-Visual-Studio-2010---W_90C5/vshtml5_2.png",              "http://photos4.meetupstatic.com/photos/event/d/e/0/0/event_117656832.jpeg",               "http://e4dhtml5.azurewebsites.net/Content/html5man.jpg",               "http://la-matrice.org/wp-content/uploads/2013/02/css3.png"];

var count=0;
for(var i=0;i<imageList.length;i++){
    var image=new Image();
    var number=i+0;
    image.src=imageList[number];
    container.append(image);    
    container.append(imageList[number]);
    image.load();
    count++;
}

container.append(count);

the reason for the +0 is that i wanted to make sure it wasn't a reference of i being saved but the actual value of the expression. it didn't help either way. that was the same reason i did number as a new var as well. with or without it still didn't work; — Lpc_dark
– Lpc_dark, Commented May 26, 2013 at 17:14

Nile · Accepted Answer · 2013-05-26 17:32:14Z

1

Remove image.load() in your for loop.

for(var i=0;i<imageList.length;i++){
    var image=new Image();
    var number=i+0;
    image.src=imageList[number];
    container.append(image);    
    container.append(imageList[number]);
    count++;
}

http://jsfiddle.net/6skav/

Get rid of "container.append(imageList[number]);" if you don't want the url to display.

edited May 26, 2013 at 17:32

answered May 26, 2013 at 17:19

Nile

1,5861 gold badge14 silver badges25 bronze badges

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

Comments

Levi Botelho · Accepted Answer · 2013-05-26 17:20:14Z

1

http://jsfiddle.net/GsQtn/1/

This seems to do what you are intending. I think the problem is with all your extraneous image code. Basically the loop that I implemented looks like this:

for(var i=0;i<imageList.length;i++){
    var image = document.createElement("img");
    image.src=imageList[i];
    container.append(image);
    count++;
}

answered May 26, 2013 at 17:20

Levi Botelho

25.4k5 gold badges64 silver badges100 bronze badges

1 Comment

Lpc_dark Over a year ago

i figured it out. i didn't need to call load function like i do with audio and video tags

Sam · Accepted Answer · 2013-05-26 17:22:16Z

1

I tried this in the fiddle and it worked.

for(var i=0;i<imageList.length;i++){
   var image=new Image();
   image.src=imageList[i];
  container.append(image);    
}

enter image description here

answered May 26, 2013 at 17:22

Sam

1,3413 gold badges23 silver badges50 bronze badges

2 Comments

Lpc_dark Over a year ago

hmm maybe my screen was small.. let me check again

Lpc_dark Over a year ago

those are the pictures. it just doesn't work on my screen i have no idea why

Lpc_dark · Accepted Answer · 2013-05-26 18:33:21Z

0

The reason this wasn't working was that I was calling the image.load() function. I got use to working with audio and video tags which recently i was doing, you don't need to call load for images. In fact it doesn't have that method.

this is the final working code with out the testing stuff

  for(var i=0;i<imageList.length;i++){
    var image=new Image();
    image.src=imageList[i];
    container.append(image);    
    }

edited May 26, 2013 at 18:33

answered May 26, 2013 at 18:27

Lpc_dark

2,9827 gold badges34 silver badges51 bronze badges

Collectives™ on Stack Overflow

Javascript for loop not looping correctly

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related