jquery preload the page loaded via load() method

Question

Hi, 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.

Answer 1

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.

Answer 2

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