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

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 — Mi-Creativity
– Mi-Creativity, Commented Oct 24, 2015 at 4:42
there is like 200 images:( @JEES and the file would be way to big — NooBskie
– NooBskie, Commented Oct 24, 2015 at 4:42
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 — Mi-Creativity
– Mi-Creativity, Commented Oct 24, 2015 at 4:44
Try var slides = [], i = 0, noOfImages = 200; while(i < noOfImages) slides.push('assets/images/earth/Sequence%0100' + i++ + '.jpg'); — Tushar
– Tushar, Commented Oct 24, 2015 at 4:45
@Tushar, this wouldn't solve the 01009 will turn to 010010 — Mi-Creativity
– Mi-Creativity, Commented Oct 24, 2015 at 4:48

Suchit kumar · Accepted Answer · 2015-10-24 06:44:25Z

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">

edited Oct 24, 2015 at 6:44

answered Oct 24, 2015 at 4:53

Suchit kumar

11.9k3 gold badges26 silver badges46 bronze badges

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

7 Comments

NooBskie Over a year ago

This works well but what about when it goes past 10?

Mi-Creativity Over a year ago

@Suchit, when img is 01009 the img++ will be `010010 so he needs sme conditional statement to solve it.

Mi-Creativity Over a year ago

something like this var img = (i < 10) ? '0100' + i++ : '010' + i++; slides.push('assets/images/earth/Sequence%' + img + '.jpg');

Mi-Creativity Over a year ago

he will need a similar fix when img = 9 and img = 99 considering the number of images is 200

Nimble Over a year ago

"0000".substr(num.toString().length)+num is a simpler way to add padding to a number.

|

NooBskie · Accepted Answer · 2015-10-24 06:02:56Z

1

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);

}

edited Oct 24, 2015 at 6:02

NooBskie

3,8511 gold badge35 silver badges56 bronze badges

answered Oct 24, 2015 at 5:10

Chilli

1233 bronze badges

1 Comment

NooBskie Over a year ago

This still wont solve the second problem of this post

Mi-Creativity · Accepted Answer · 2015-10-24 06:12:37Z

0

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..

edited Oct 24, 2015 at 6:12

answered Oct 24, 2015 at 5:19

Mi-Creativity

9,66410 gold badges40 silver badges49 bronze badges

4 Comments

NooBskie Over a year ago

Just post the full code if you could so i know which answer to accept

Mi-Creativity Over a year ago

accept his answer and modify your code including this one, or he might modify his answer so that you accept it

Mi-Creativity Over a year ago

@NooBskie, I've updated this snippet and it is working now

Mi-Creativity Over a year ago

Now the while works, my fault i didn't set img = 0 before it!

Collectives™ on Stack Overflow

Inserting incremental values into loop array

3 Answers 3

7 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related