CODEWITHSUNDEEP
javascript
arrest warrant
arrest warrant

Reputation: 354

Javascript + timer

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.

Upvotes: 1

Views: 201

Answers (4)

user1726343
user1726343

Reputation:

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

Upvotes: 1

Ravi Sankar Raju
Ravi Sankar Raju

Reputation: 2958

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

Upvotes: -2

Esailija
Esailija

Reputation: 140236

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

Upvotes: 7

Hasanavi
Hasanavi

Reputation: 8625

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

Upvotes: -1

Related Questions