CODEWITHSUNDEEP
javascriptjqueryloading
Ahmed Najaaf
Ahmed Najaaf

Reputation: 45

Remove loading spinner after a set time

I'm using the following javascript to load and remove a spinner for a web page.

$(window).load(function() {
  $(".sk-rotating-plane").fadeOut("slow");;
  setTimeout(function(){
    $('body').addClass('loaded');
  }, 10);
});

What I want to do is change it so that if the page load is taking longer than 5 seconds, then remove the spinner (fadeout), but I still want it to appear normally if the loading takes normal time (load function).

Can this be done with an if statement in javascript?

Upvotes: 3

Views: 7423

Answers (3)

mukama
mukama

Reputation: 979

It's also okay to close it twice.

setTimeout(function(){
    $(".sk-rotating-plane").fadeOut("slow");
}, 5000);

$(window).on('load', function(){
    $(".sk-rotating-plane").fadeOut("slow");
    $('body').addClass('loaded');
    // more stuff
});

Upvotes: 1

Rohit Kumar
Rohit Kumar

Reputation: 1958

You could achieve this by using setinterval method to look up regularly , clear timer when loaded. 

 $(window).load(function() {
    clearInterval(stimer);
    $('body').addClass('loaded');
    });

Now start a timer to look up time to loading

var count=1
var stimer=setInterval(function(){
   if(count==5)
    {
     $(".sk-rotating-plane").fadeOut("slow"); // taking more time
    }
  count++;
  }, 1000);

Upvotes: 0

Rayon
Rayon

Reputation: 36609

Try this:

var executed = false;
var loaded = function () {
    if (!executed) {
        $(".sk-rotating-plane").fadeOut("slow");
        setTimeout(function () {
            $('body').addClass('loaded');
        }, 10);
        executed = true;
    }
};
$(window).on('load', loaded);
setTimeout(loaded, 5000);

Upvotes: 3

Related Questions