在Ajax中顯示/隱藏Div。（）

Question

我想在.load（）之前顯示「LoaderMain」div，並且完全隱藏「LoaderMain」。當我取消註釋我的表演/隱藏時，它永遠不會顯示。

$('#content').html(''); 
      //$('#LoaderMain').show(); 
      $("#content").load(url, function(response, status, xhr) { 
      if (status == "error") { 
       var msg = "Sorry but there was an error: "; 
       $("#content").html(msg + xhr.status + " " + xhr.statusText); 
      } 

      }); 
      //$('#LoaderMain').hide(); 

Answer 1

把$('#LoaderMain').hide();放在你的回調函數中。

例如：

$('#content').html(''); 
$('#LoaderMain').show(); 
$("#content").load(url, function(response, status, xhr) { 
    if (status == "error") { 
     var msg = "Sorry but there was an error: "; 
     $("#content").html(msg + xhr.status + " " + xhr.statusText); 
    } 
    $('#LoaderMain').hide(); 
}); 

Answer 2

由於負載是異步的，您需要使用自己的hide（）回調函數裏面：

$('#content').html(''); 
$('#LoaderMain').show(); 
$("#content").load(url, function(response, status, xhr) { 
    if (status == "error") { 
     var msg = "Sorry but there was an error: "; 
     $("#content").html(msg + xhr.status + " " + xhr.statusText); 
    } 
    $('#LoaderMain').hide(); 
}); 

Answer 3

$("#content").load(url, function(response, status, xhr) { 
    // Stuff 1 
    $('#LoaderMain').hide(); 
}); 
// Stuff 2 

負載asynchronous，這意味着函數Load將開始運行，並且運行時，腳本繼續爲填充2，並且一旦在後臺運行的函數完成，它會執行s凝灰岩1.注意，如果功能是非常快的，東西1可東西2.

做過如果函數是synchronous，東西1將始終東西之前完成2

這就是爲什麼AJAX異步手段JavaScript Xml，因爲它是在後臺運行的。

Answer 4

$('#content').html(''); 
     //$('#LoaderMain').show(); 
     $.ajax({ 
      url: "your.url", 
      beforeSend: function() { 
      //do something before sending the ajax, like hiding or showing that spinner 
      }, 
      type: 'post', //or get if you prefer that 
      data: "", // put parameters like ?id=1&name=something here 
      success: function(data) { 
      //do something after successful ajax request like $('#content').html(data); 
      } 
     }); 

Answer 5

你用什麼事件加載內容？

http://api.jquery.com/load/#callback-function

大多數jQuery的事件/ AJAX功能有所回調PARAM，您可以發送給一個函數，以執行事件/ AJAX功能擁有完整的處理之後。

$('#LoaderMain').show(); 
$('#result').load('ajax/test.html', function() { 
    $('#LoaderMain').hide(); 
});