CODEWITHSUNDEEP
jqueryload
Andrew Howard
Andrew Howard

Reputation: 3072

Jquery determine if load has taken longer to load than a set time

I am AJAXing in content from external pages. Most of the time the load takes less than a second, but is there a way I can fade in a div (lets say a preload div) which comes up if say the load takes longer than 3 seconds? So something like this...

$targetPoint.load($dataImportURL + " " +$rawCollectionPoint,function(){
    if (($(this).load >= 3))
    {
        alert ("Its taken more than 3 seconds to load");
    }                       
});

Upvotes: 2

Views: 1958

Answers (1)

BZink
BZink

Reputation: 7947

Take a look at the JavaScript setTimeout function.

When you send off your ajax call...

var timeout = setTimeout(function(){
    alert ("Its taken more than 3 seconds to load");
}, 3000);

And when the ajax call completes cancel the timeout trigger.

clearTimeout(timeout);

Edit: you may have to use the .ajax() function from jQuery so you can take advantage of the beforeSend and success callbacks

Something like this...

var timeout;
$.ajax({
   url: $dataImportURL + " " +$rawCollectionPoint
   beforeSend: function(){
       timeout = setTimeout(function(){
        alert ("Its taken more than 3 seconds to load");
    }, 3000);
   }
   success: function(data){
       clearTimeout(timeout);
       $targetPoint.html(data);
   }

});

Upvotes: 6

Related Questions