CODEWITHSUNDEEP
javascript
Arthur Kushman
Arthur Kushman

Reputation: 3609

set interval through the array in javascript

How to set interval or may be timeout through the array, to produce effects for the element every 2 sec for example the 1-st idea is to programm something like this:

for (photoKey in arrBigPhotoes) {
      setInterval(function() {
        // alert(arrBigPhotoes[photoKey]);

          document.getElementById("big_photo").src='/upload/images/'+arrBigPhotoes[photoKey];

      }, 2000);
}

But it didn't work properly. May be someone can help me with this task I'll be extremely glad. I'm also have a jQuery - the resolution may be through this library, but without any plug-ins. Thanks.

Upvotes: 1

Views: 1733

Answers (2)

emboss
emboss

Reputation: 39620

I would suggest you pre-load the images you are trying to display. If the user is on a slow connection, your approach would fail.

var images = new Array();
var counter = 0;

var image = document.createElement("img");
image.onload = function() {
    counter++;
};
image.src = <url>;
images.push(image);

The counter is there so that you can determine when all images are properly loaded. Let's say you have six images, then, in your "intervaled" function, you would immediately return if counter < 6.

Your "switcher" function could look this way

var i = 0;

setInterval(function() {
    if (counter < 6) return;

    i = (i+1) % images.length;
    document.getElementById("big_photo").src = images[i].src;
}, 2000);

Upvotes: 1

Sam Dufel
Sam Dufel

Reputation: 17598

Try something like this - 

var photos = ['1.jpg', '2.jpg', '3.jpg'];
var photo_index = 0;

function switchPhoto() {
  photo_index = (photo_index + 1) % photos.length;
  document.getElementById('big_photo').setAttribute('src', '/upload/images/' + photos[photo_index]);
}

setInterval(switchPhoto, 2000);

You should probably put this inside some kind of document ready event handler

Upvotes: 3

Related Questions