.load方法花費的時間太長

Question

我正在做的是將不同的內容加載到div每個按鈕中。 我正在這樣做的代碼：

$(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';
    });
});

這是一個代碼的示例。 我又得到了8個這樣的代碼，但是每次我都在#galleries中加載一個不同的php頁面。

我的問題是，加載第二頁需要花費很多時間。 例如，在我第一次點擊任何按鈕時，加載所有內容都需要花費一秒鍾，無論它包含什么內容。 但是每當我按下另一個按鈕以加載另一個頁面時，我都必須等待大約3-5秒，而當我等待時，它什么也沒有顯示，沒有div被顯示，只有背景。

有可能解決這個問題嗎？ 或者，是否可以插入LOADING圖片或文本以使用戶知道其正在加載？ 因此，在加載頁面時，用戶會看到：“ LOADING ..”或某些加載圖標。

Answer 1

這應該使您朝正確的方向前進。

我也不知道您對$(this)所有不同影響是什么。

$(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();

      });

});