jQuery 给jquery ajax .load() 添加加载动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10913895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add a loading animation to jquery ajax .load()
提问by rzr
I currently have this code and it's pretty simple
我目前有这个代码，它很简单
$('#window').load('http://mysite.com/mypage.php');
But it shows the content only after fully loaded and during that duration the #windows element remains empty. I want to show a loading image until the page loads. How should i do it? The jquery site explains nothing about it. (afaik)
但它仅在完全加载后才显示内容，并且在此期间#windows 元素保持为空。我想在页面加载之前显示加载图像。我该怎么做？jquery 站点对此没有解释。（AFAIK）
回答by Rakesh Juyal
Create a loadingdiv first.
loading首先创建一个div。
<div id='loadingDiv'>
Please wait... <img src='path to your super fancy spinner' />
</div>
Hide this DIV initially and attach the code to show this div when ajaxCall starts and hide this when ajax call completes.
最初隐藏此 DIV 并附加代码以在 ajaxCall 启动时显示此 div，并在 ajax 调用完成时隐藏此代码。
$('#loadingDiv').hide().ajaxStart( function() {
$(this).show(); // show Loading Div
} ).ajaxStop ( function(){
$(this).hide(); // hide loading div
});
Edit
There was some issue in SO formatting tags a while back. Added those again.
编辑
不久前，SO 格式标签存在一些问题。又加了那些。
回答by rzr
For this purpose you have to use a gif image. First of all change the html of #window to gif image until the content is loaded
为此，您必须使用 gif 图像。首先将#window的html改成gif图片，直到内容加载完毕
Working Code
工作代码
$('#window').html("<img src="image_url" />").load('http://mysite.com/mypage.php');
回答by BLSully
For async requests that I know have the potential to take more than a few milliseconds, I use Spin.jsIt does not have any external dependencies, and is cross-browser compatible
对于我知道可能需要超过几毫秒的异步请求，我使用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);
});
see fiddle http://jsfiddle.net/y75Tp/73/(update thanks to verbumSapienti)
见小提琴http://jsfiddle.net/y75Tp/73/（更新感谢verbumSapienti）
回答by daxyonis
1) Go to cssload.netand configure a spinner with shape, colors, speed and size. Download the code.
1) 转到cssload.net并配置一个带有形状、颜色、速度和大小的微调器。下载代码。
2) Put the stylecode into a css file
2）将样式代码放入css文件中
3) Put the divcode into your html file, such as:
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) In a js file, add the following jquery lines:
4) 在 js 文件中，添加以下 jquery 行：
//*******************************
// Loading div animation
$(document).ajaxStart(function(){
$("#loadingDiv").css("display","block");
});
$(document).ajaxComplete(function(){
$("#loadingDiv").css("display","none");
});
the ajaxStart is called whenever an ajax call starts; the ajaxComplete is called when the same call is completed.
ajaxStart 每当 ajax 调用开始时被调用；ajaxComplete 在同一个调用完成时被调用。
5) If you do not want to see the spinner when the page is first loaded, make sure to add the following in your css file:
5) 如果您不想在页面首次加载时看到微调器，请确保在您的 css 文件中添加以下内容：
#loadingDiv{
display:none;
}
回答by claytronicon
The jQuery load() method has a callback where you can get the xhr status. Using the spin.js loader (or any other load indicator), you can show, then hide when the .load() is complete. Note: this example will give a 404 since the file loaded does not exist, but the spinner load indicator works just the same.
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>