.load方法花费的时间太长

Question

What I'm doing is loading different content into a div each button. The code I'm using to do so:

$(function(){
    $('#galleries').hide().load("letters/index.php", function(){
        $(this).slideDown(1);
        $(this).slideUp(1);  
        $(this).hide();
        $(this).slideDown(1500);/* or fadeIn() or any other effect*/
        document.getElementById("data").style.display = 'none';
    });
});

This is an example of one code. I got another 8 like this, but I'm loading into #galleries a different php page everytime.

My problem is, it takes ages to load the second page. For example, on my first click on any button, it takes a second to load everything, doesn't matter what content it has. But whenever I press on another button to load another page, I have to wait for about 3-5seconds, and when I'm waiting, it shows nothing, no div is being shown, just the background.

Is it possible to fix this? Or maybe, is it possible inserting an LOADING image or text to let the user know that it's loading? so while the page is being loaded, the user sees : "LOADING.." or some loading icon.

Answer 1

This should get you going in the right direction.

Also I don't know what's with all of the different effects you have on $(this) either.

$(function(){ 
    $(".loading-image").show();

     $('#galleries').hide().load("letters/index.php", function(){
          $(this).slideDown(1);
          $(this).slideUp(1);    
          $(this).hide();
          $(this).slideDown(1500);/* or fadeIn() or any other effect*/

          $("#data").hide(); //replacing your getElementById


          $(".loading-image").hide();

      });

});