CODEWITHSUNDEEP
javascript
user1342164
user1342164

Reputation: 1454

Image not changing

Hi I am trying to get an image to blink using the code below by changing the image. Is there something wrong with my "setTimeout"? TIA

var Test = new Array();
Test.length = 2;

for (var i = 0; i < Test.length; i++) { 
    Test[i] = new Image();
    Test[i].src = "images/Image2" + (i+1) + ".png";
}

function ChangeImage() {
    for (var i = 0; i < Test.length; i++) {
        document.getElementById('Test_Image').src = Test[i].src; 
    }
    setTimeout("ChangeImage()", 1000);           
 }   

 ChangeImage();

Upvotes: 0

Views: 108

Answers (4)

Quangdao Nguyen
Quangdao Nguyen

Reputation: 1373

Your for loop switches the src once and immediately switches it back, so you can't see it change. Try this instead:

var Test = [];

for (var i = 0; i < 2; i++) {
    Test.push("images/Image2" + (i+1) + ".png");
};

var x = 0;
document.getElementById('Test_Image').src = Test[x];

(function ChangeImage() {
    if(++x >= Test.length) x = 0;
    document.getElementById('Test_Image').src = Test[x];
    setTimeout(ChangeImage, 1000);
})();

EDIT: As Santi pointed out, my original solution only supported two images, while OP requested to loop through an array.

Upvotes: 1

Mihai Popescu
Mihai Popescu

Reputation: 396

First.. you complicated yourself with the new Image() part. You could just use Test[i] = "images/Image2" + (i+1) + ".png";

And for your code, firstly you change the images really fast once every 1 second.

It should be something like this:

function ChangeImage() {
    for (var i = 0; i < Test.length; i++) {
       setTimeout(function(){document.getElementById('Test_Image').src = Test[i]; 
        }, (i+1) *1000);      
    }      

   if(play){
     setTimeout("ChangeImage()", Test.length * 1000);        
   }
}

This will not halt the javascript code at any point.

After 1 sec it will put image21, after 2 seconds image21 and it will call itself again and it will start all over again;

I put the variable play so you could stop the animation if you wanted.

Upvotes: 2

Gavin
Gavin

Reputation: 4515

Try something like this.

Edit: Accidentally put setTimeout instead of setInterval. Thanks Santi for point that out.

var Test = new Array();
Test.length = 2;

for (var i = 0; i < Test.length; i++) { 
    Test[i] = new Image();
    Test[i].src = "images/Image2" + (i+1) + ".png";
}

var count = 0;

function ChangeImage() {
  if (count >= Test.length)
    count = 0;
  document.getElementById('Test_Image').src = Test[count].src;  
  count++;   
}   

setInterval(ChangeImage, 1000);

Upvotes: 1

jfriend00
jfriend00

Reputation: 707326

setTimeout() is not blocking. That means it only schedules an activity to happen some time in the future and the rest of your Javascript just keeps running. So, you were scheduling Test.length setTimeout() all for the exact same time 1 second from now. Instead, you need to schedule the next image change and then, when that timer fires, you schedule the one after that and so on.

If you just want to cycle through the various images one second apart, you can do this:

function ChangeImage() {
    var cntr = 0;

    function next() {
        if (cntr < Test.length) {
            document.getElementById('Test_Image').src = Test[cntr++].src; 
            // after changing src, schedule next change for 1 second from now
            setTimeout(next, 1000);
        }
    }
    // start first iteration
    next();
 }   

 ChangeImage();

You may also need to make sure that all your images are properly preloaded so they display immediately when you set their source. There are numerous ways to make sure the preload is done before starting the rotation such as these:

Image preloader javascript that supports events

How do you cache an image in Javascript

Upvotes: 1

Related Questions