添加加载动画，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>