Javascript 为 jQuery AJAX 调用实现加载指示器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11961438/
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
Implement a loading indicator for a jQuery AJAX call
提问by devcoder
I have a Bootstrap modal which is launched from a link. For about 3 seconds it just sits there blank, while the AJAX query fetches the data from the database. How can I implement some sort of a loading indicator? Does twitter bootstrap provide this functionality by default?
我有一个从链接启动的 Bootstrap 模式。大约 3 秒钟，它只是空白，而 AJAX 查询从数据库中获取数据。如何实现某种加载指示器？默认情况下，twitter bootstrap 是否提供此功能？
EDIT: JS code for modal
编辑：模态的JS代码
<script type="text/javascript">
$('#myModal').modal('hide');
$('div.divBox a').click(function(){
var vendor = $(this).text();
$('#myModal').off('show');
$('#myModal').on('show', function(){
$.ajax({
type: "GET",
url: "ip.php",
data: "id=" + vendor,
success: function(html){
$("#modal-body").html(html);
$(".modal-header h3").html(vendor);
$('.countstable1').dataTable({
"sDom": "T<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"aaSorting":[[0, "desc"]],
"iDisplayLength": 10,
"oTableTools": {
"sSwfPath": "swf/copy_csv_xls_pdf.swf",
"aButtons": ["csv", "pdf"]
}
});
}
});
});
});
$('#myModal').on('hide', function () {
$("#modal-body").empty();
});
</script>
采纳答案by Jacob Mouka
I'm guessing you're using jQuery.get or some other jQuery ajax function to load the modal. You can show the indicator before the ajax call, and hide it when the ajax completes. Something like
我猜你正在使用 jQuery.get 或其他一些 jQuery ajax 函数来加载模式。您可以在 ajax 调用之前显示指示器，并在 ajax 完成时隐藏它。就像是
$('#indicator').show();
$('#someModal').get(anUrl, someData, function() { $('#indicator').hide(); });
回答by leansy
I solved the same problem following this example:
我按照这个例子解决了同样的问题：
This example uses the jQuery JavaScript library.
此示例使用 jQuery JavaScript 库。
First, create an Ajax icon using the AjaxLoad site.
Then add the following to your HTML :
首先，使用AjaxLoad 站点创建一个 Ajax 图标。
然后将以下内容添加到您的 HTML 中：
<img src="/images/loading.gif" id="loading-indicator" style="display:none" />
And the following to your CSS file:
并将以下内容添加到您的 CSS 文件中：
#loading-indicator {
position: absolute;
left: 10px;
top: 10px;
}
Lastly, you need to hook into the Ajax events that jQuery provides; one event handler for when the Ajax request begins, and one for when it ends:
最后，您需要挂钩 jQuery 提供的 Ajax 事件；一个用于 Ajax 请求开始时的事件处理程序，以及一个用于结束时的事件处理程序：
$(document).ajaxSend(function(event, request, settings) {
$('#loading-indicator').show();
});
$(document).ajaxComplete(function(event, request, settings) {
$('#loading-indicator').hide();
});
This solution is from the following link. How to display an animated icon during Ajax request processing
此解决方案来自以下链接。 如何在 Ajax 请求处理期间显示动画图标
回答by ajaristi
There is a global configuration using jQuery. This code runs on every global ajax request.
有一个使用 jQuery 的全局配置。此代码在每个全局 ajax 请求上运行。
<div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;">
<img src="themes/img/ajax-loader.gif"></img>
</div>
<script type="text/javascript">
jQuery(function ($){
$(document).ajaxStop(function(){
$("#ajax_loader").hide();
});
$(document).ajaxStart(function(){
$("#ajax_loader").show();
});
});
</script>
Here is a demo: http://jsfiddle.net/sd01fdcm/
这是一个演示：http: //jsfiddle.net/sd01fdcm/
回答by HenryZhang
A loading indicator is simply an animated image (.gif) that is displayed until the completed event is called on the AJAX request. http://ajaxload.info/offers many options for generating loading images that you can overlay on your modals. To my knowledge, Bootstrap does not provide the functionality built-in.
加载指示器只是一个动画图像 (.gif)，它会一直显示，直到在 AJAX 请求上调用完成的事件。http://ajaxload.info/提供了许多用于生成加载图像的选项，您可以将这些图像叠加在模态上。据我所知，Bootstrap 不提供内置功能。
回答by Rhys Stephens
This is how I got it working with loading remote content that needs to be refreshed:
这就是我如何加载需要刷新的远程内容：
$(document).ready(function () {
var loadingContent = '<div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div>';
// This is need so the content gets replaced correctly.
$("#myModal").on("show.bs.modal", function (e) {
$(this).find(".modal-content").html(loadingContent);
var link = $(e.relatedTarget);
$(this).find(".modal-content").load(link.attr("href"));
});
$("#myModal2").on("hide.bs.modal", function (e) {
$(this).removeData('bs.modal');
});
});
Basically, just replace the modal content while it's loading with a loading message. The content will then be replaced once it's finished loading.
基本上，只需在加载消息时替换模态内容即可。一旦完成加载，内容将被替换。
回答by Mathias
This is how I realised the loading indicator by an Glyphicon:
这就是我通过 Glyphicon 实现加载指示器的方式：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
.gly-ani {
animation: ani 2s infinite linear;
}
@keyframes ani {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
</style>
</head>
<body>
<div class="container">
<span class="glyphicon glyphicon-refresh gly-ani" style="font-size:40px;"></span>
</div>
</body>
</html>
