Inserting incremental values into loop array

Question

Right now I am animating an image by stringing multiple images together with setInterval(showNextSlide, 100); and it works really well.

The only thing that I'm running into problems with is adding values dynamically into var slides = [src, ] the while loop just loads the final image.

Also the way the images are saved the increment moves to the next zero so 01009 converts to 01010 whenever I use my loop it will convert to 010010 note the extra zero at the end.

Javascript

window.onload = function() {
 var img = 0
 while (img < 15) {
 img++;
 }
 var src = 'assets/images/earth/Sequence%0100' + img + '.jpg.';
 var slides = [src, ],
 index = 0,
 timer = 0;
 // Show the first slide
 showNextSlide();
 // Show "next" slide every five seconds
 timer = setInterval(showNextSlide, 100);
 // The function we call to show the "next" slide 
 function showNextSlide() {
 if (index >= slides.length) {
 index = 0;
 }
 document.getElementById('earth').src = slides[index++];
 }
};

JsFiddle

• Mi-Creativity: Why don't you make your images as one sprite image containing whole set of smaller images and just offset it's x or y by its width or height respectively, thus you reduce your http request to the minimum and you won't end up the final image only
• NooBskie: there is like 200 images:( @JEES and the file would be way to big
• Mi-Creativity: it is ok and the file size is almost the same as the whole set of the small images, but with only 1 http request instead of 200
• Tushar: Try var slides = [], i = 0, noOfImages = 200; while(i < noOfImages) slides.push('assets/images/earth/Sequence%0100' + i++ + '.jpg');
• Mi-Creativity: @Tushar, this wouldn't solve the 01009 will turn to 010010

Answer 1

try this:It will keep on changing the image src of earth based on the index value.

Update based on JEES Comment.

<script>
 window.onload = function() {
 var i = 0
 var slides = [];
 while (i < 200) {
 if(i <= 9){ img= '0100' + i++; }
 else if(i <= 99){ img= '010' + i++; } 
 else{ img= '01' + i++; } 
 var src = 'assets/images/earth/Sequence%' + img + '.jpg';
 slides.push(src); 
 }
 console.log(slides);
 index = 0,
 timer = 0;
 // Show the first slide
 showNextSlide();
 // Show "next" slide every five seconds
 timer = setInterval(showNextSlide, 100);
 // The function we call to show the "next" slide 
 function showNextSlide() {
 if (index >= slides.length) {
 index = 0;
 }
 document.getElementById('earth').src = slides[index++];
 }
 };
</script>
<img src="" id="earth">

• NooBskie: This works well but what about when it goes past 10?
• Mi-Creativity: @Suchit, when img is 01009 the img++ will be `010010 so he needs sme conditional statement to solve it.
• Mi-Creativity: something like this var img = (i < 10) ? '0100' + i++ : '010' + i++; slides.push('assets/images/earth/Sequence%' + img + '.jpg');
• Mi-Creativity: he will need a similar fix when img = 9 and img = 99 considering the number of images is 200
• Nimble: "0000".substr(num.toString().length)+num is a simpler way to add padding to a number.

Answer 2

Please Try It :

var img = 0;
var slides = new Array(); 
while (img < 5) {
img++;
var src = 'assets/images/earth/Sequence%0100' + img + '.jpg';
slides.push(src);
}

• NooBskie: This still wont solve the second problem of this post

Answer 3

This is part of the answer and it will fix it when img value is 9 or 99 since he has 200 images, if images number> 1000 he'd need another one when img value 999.. please tell me if i should delete this answer:

UPDATED:

 var img = 0;
 while(img < 200) {
 if (img < 10) { imgURL = '0100' + img; }
 else if (img < 100) { imgURL = '010' + img;}
 else { imgURL = '01' + img; }
 slides.push('assets/images/earth/Sequence%' + imgURL + '.jpg');
 img++;
}

check this Fiddle to see it in action..

• NooBskie: Just post the full code if you could so i know which answer to accept
• Mi-Creativity: accept his answer and modify your code including this one, or he might modify his answer so that you accept it
• Mi-Creativity: @NooBskie, I've updated this snippet and it is working now
• Mi-Creativity: Now the while works, my fault i didn't set img = 0 before it!