添加加載動畫，jQuery的AJAX .load（）

Question

我目前有此代碼，這是很簡單的

$('#window').load('http://mysite.com/mypage.php'); 

但它表明只有在滿載和持續時間#windows元素保持爲空時的內容。 我想顯示加載圖像，直到頁面加載。我應該怎麼做？ jquery網站對此沒有任何解釋。 （afaik）

Answer 1

首先創建一個loading股利。

<div id='loadingDiv'> 
    Please wait... <img src='path to your super fancy spinner' /> 
</div> 

---

隱藏這個div最初和附加代碼來顯示該div時AjaxCall的啓動和隱藏這個AJAX調用完成時。

$('#loadingDiv').hide().ajaxStart(function() { 
$(this).show(); // show Loading Div 
}).ajaxStop (function(){ 
$(this).hide(); // hide loading div 
}); 

編輯
有在SO格式化標籤的一些問題而回。再次添加這些。

Answer 2

爲此，您必須使用gif圖像。所有的 首先改變#window的HTML爲GIF圖像，直到內容加載

工作守則

$('#window').html("<img src="image_url" />").load('http://mysite.com/mypage.php'); 

Answer 3

對於我知道必須採取超過幾毫秒的時間的潛力，我用Spin.js它沒有任何外部依賴，並且是跨瀏覽器兼容

var opts = { 
    lines: 13, // The number of lines to draw 
    length: 10, // The length of each line 
    width: 4, // The line thickness 
    radius: 11, // The radius of the inner circle 
    rotate: 0, // The rotation offset 
    color: '#000', // #rgb or #rrggbb 
    speed: 0.6, // Rounds per second 
    trail: 32, // Afterglow percentage 
    shadow: false, // Whether to render a shadow 
    hwaccel: false, // Whether to use hardware acceleration 
    className: 'spinner', // The CSS class to assign to the spinner 
    zIndex: 2e9, // The z-index (defaults to 2000000000) 
    top: 'auto', // Top position relative to parent in px 
    left: 'auto' // Left position relative to parent in px 
}; 

var target, spinner; 

$(function(){ 
    target = $('#window').get(0); 
    spinner = new Spinner(opts); 
    spinner.spin(target); 
    setTimeout(function(){ 
     spinner.stop(); 
     $(target).html("Loading finished."); 
    }, 3500); 
}); 

看到小提琴http://jsfiddle.net/y75Tp/73/（更新異步請求感謝verbumSapienti）

Answer 4

1）轉到cssload.net並配置形狀，顏色，速度和大小的微調框。下載代碼。

2）將風格代碼到CSS文件

3）將DIV代碼到你的HTML文件，如：

<div id="loadingDiv"> 
     Please wait... 
     <div id="spinnerDiv"> 
      <div id="blockG_1" class="facebook_blockG"> 
      </div> 
      <div id="blockG_2" class="facebook_blockG"> 
      </div> 
      <div id="blockG_3" class="facebook_blockG"> 
      </div> 
     </div> 
    </div> 

where the #spinnerDiv is the actual div from cssload. 

4）在一個js文件，添加下面的jQuery線：

//******************************* 
    // Loading div animation 
    $(document).ajaxStart(function(){ 
      $("#loadingDiv").css("display","block"); 
     }); 
     $(document).ajaxComplete(function(){ 
      $("#loadingDiv").css("display","none"); 
     }); 

的ajaxStart被稱爲每當一個Ajax調用啓動; 當相同的調用完成時調用ajaxComplete。

5）如果你不希望看到的是第一次加載頁面時的微調，一定要添加以下在你的CSS文件：

#loadingDiv{ 
display:none; 
} 

Answer 5

jQuery的load（）方法有所回調，其中你可以得到xhr狀態。使用spin.js加載器（或任何其他加載指示器），您可以顯示，然後在.load（）完成時隱藏。注意：由於加載的文件不存在，所以此示例將顯示404，但微調器加載指示器的作用相同。

// create gloabal page spinner for loading stuff 
 
var opts = { 
 
    lines: 13, // The number of lines to draw, 
 
    length: 12, // The length of each line 
 
    width: 4, // The line thickness 
 
    radius: 15, // The radius of the inner circle 
 
    scale: .5, // Scales overall size of the spinner 
 
    corners: 1, // Corner roundness (0..1) 
 
    color: '#000', // #rgb or #rrggbb or array of colors 
 
    opacity: 0.25, // Opacity of the lines 
 
    rotate: 0, // The rotation offset 
 
    direction: 1, // 1: clockwise, -1: counterclockwise 
 
    speed: 1, // Rounds per second 
 
    trail: 60, // Afterglow percentage 
 
    fps: 20, // Frames per second when using setTimeout() as a fallback for CSS 
 
    zIndex: 2e9, // The z-index (defaults to 2000000000) 
 
    className: 'spinner', // The CSS class to assign to the spinner 
 
    top: '50%', // Top position relative to parent 
 
    left: '50%', // Left position relative to parent 
 
    shadow: false, // Whether to render a shadow 
 
    hwaccel: false, // Whether to use hardware acceleration 
 
    position: 'absolute', // Element positioning 
 
} 
 
var spinner = new Spinner(opts).spin(); 
 
var target = $("#loader").append(spinner.el); 
 

 
$("#result").load("ajax/test.html", function(response, status, xhr) { 
 
    if (status == "error") { 
 
    var msg = "Sorry but there was an error: "; 
 
    $("#result").html(msg + xhr.status + " " + xhr.statusText); 
 
    } 
 
    // remove loader 
 
    $("#loader").empty(); 
 
});

<script src="http://fgnass.github.io/spin.js/spin.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="loader"> 
 
</div> 
 
<div id="result"> 
 
</div>