Javascript + timer

Question

See the code below...it changes the image after the page load + 8 sec and then keep on changing every 1 second.

setInterval(function(){
    setTimeout(function(){
         $('#person1').attr('src', 'lastwavewinnerimages/wtrhwt.jpg');

         setTimeout(function(){
             $('#person1').attr('src', 'lastwavewinnerimages/t8yejty.jpg');

             setTimeout(function(){
                 $('#person1').attr('src', 'lastwavewinnerimages/t2tgw8.jpg');

                 setTimeout(function(){
                     $('#person1').attr('src', 'lastwavewinnerimages/45234.jpg');

                     setTimeout(function(){
                         $('#person1').attr('src', 'lastwavewinnerimages/14134.jpg');

                         setTimeout(function(){
                             $('#person1').attr('src', 'lastwavewinnerimages/124t234grq.jpg');

                             setTimeout(function(){
                                 $('#person1').attr('src', 'lastwavewinnerimages/frbvqw34.jpg');

                                 setTimeout(function(){
                                     $('#person1').attr('src', 'lastwavewinnerimages/14tqwrbfws.jpg');
                                }, 1000);
                            }, 1000);
                        }, 1000);
                    }, 1000);
                }, 1000);
            }, 1000);
        }, 1000);
    }, 1000);
}, 8000);

This loop execute after 8 sec. I want it to start it from the very first second when the page load. How to do it.

Answer 1

setInterval waits for the 8000 to pass before the function is first called, also you might wanna refactor the code like so:

$(function(){
    var images = ['lastwavewinnerimages/wtrhwt.jpg',
                'lastwavewinnerimages/t8yejty.jpg',
                'lastwavewinnerimages/t2tgw8.jpg',
                'lastwavewinnerimages/45234.jpg',
                'lastwavewinnerimages/14134.jpg',
                'lastwavewinnerimages/124t234grq.jpg',
                'lastwavewinnerimages/frbvqw34.jpg',
                'lastwavewinnerimages/14tqwrbfws.jpg'];
    var i = 0;

    function k() {
        $('#person1').attr('src', images[i % images.length]);
        i++;
    }

    setInterval( k, 1000 );
    k();
});

Answer 2

Another approach could be to set a timeout after every iteration:

(function() {
    var imagearray = ['lastwavewinnerimages/wtrhwt.jpg',
                                'lastwavewinnerimages/t8yejty.jpg',
                                'lastwavewinnerimages/t2tgw8.jpg',
                                'lastwavewinnerimages/45234.jpg',
                                'lastwavewinnerimages/14134.jpg',
                                'lastwavewinnerimages/124t234grq.jpg',
                                'lastwavewinnerimages/frbvqw34.jpg',
                                'lastwavewinnerimages/14tqwrbfws.jpg'];
    var i = 0; //credit goes to Esailija

    (function nextimg() {
        $('#person1').attr('src', imagearray[i++ % imagearray.length]);
        setTimeout(nextimg, 1000);
    })();
})();

Answer 3

Its a duplicate of Javascript that executes after page load

All you need to do is put your code under window.onload event. Your code will run just after the page load. You may not get expected result when you change the image. Because it will start loading the image when you change the image source. If you preload your images you will get the expected result. Here are the 3 ways to preload images.

3 Ways to Preload images

Answer 4

Instead of using setInterval, write a recursive function like this.

function loopImages() {
   setTimeout("$('#person1').attr('src', 'lastwavewinnerimages/wtrhwt.jpg')", 1000);
   setTimeout("$('#person1').attr('src', 'lastwavewinnerimages/t8yejty.jpg')", 1000);
   setTimeout("$('#person1').attr('src', 'lastwavewinnerimages/t2tgw8.jpg')", 1000);
   ..
   ..
   ..
   ..
   ..
   setTimeout("loopImages()",0);
}

onload = "loopImages()"