CODEWITHSUNDEEP
jqueryajaxpreload
kmunky
kmunky

Reputation: 15583

jquery preload the page loaded via load() method

I'm trying to do something like boxy or facebox or lightbox...and so on. The only problem is that I don't know how to preload the page that is loaded into the box via load() method.

It should work like this:

  1. It pops the box
  2. Loading animation is added
  3. When the page is loaded the animation disappears

So i need to know when the page is loaded to remove the animation.

Upvotes: 5

Views: 3635

Answers (2)

andres descalzo
andres descalzo

Reputation: 14967

var function_for_display_animation = function(){
   //display animation
}
var function_for_remove_animation = function(){
   //remove animation
}

function_for_display_animation();
$(selector).load('page.php',function_for_remove_animation);

or:

$().ajaxSend(function(evt, request, settings){
    //start animation
});

$().ajaxComplete(function(event,request, settings){
    //end animation
 });

$(selector).load('page.php', function(){
    //work
});

Upvotes: 3

Michael La Voie
Michael La Voie

Reputation: 27926

If I understand you correctly, you are saying that because a page on your site will take a while to load, you would like a friendly loading message to show immediately and disappear once the page is loaded.

The trick to this is not downloading much when the page first loads. Just the loading message and some JavaScript.

What makes this work is that in your $(document).ready() function you'll use AJAX to get the slow data. Once the AJAX query returns, use JS to populate the page with the data and then turn off the loading message.

Upvotes: 1

Related Questions