为jQuery AJAX调用实现加载指示器
为jQuery AJAX调用实现加载指示器
提问于 2012-08-15 05:58:39
我有一个Bootstrap模式，这是从一个链接启动。在AJAX查询从数据库获取数据时，它在那里停留了大约3秒钟。我如何实现某种类型的加载指示器？twitter bootstrap默认提供此功能吗？
编辑:模态的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>回答 6
Stack Overflow用户
回答已采纳
发布于 2012-08-15 06:05:14
我猜您正在使用jQuery.get或其他jQuery ajax函数来加载模型。您可以在ajax调用之前显示该指示器，并在ajax完成时隐藏它。就像这样
$('#indicator').show();
$('#someModal').get(anUrl, someData, function() { $('#indicator').hide(); });Stack Overflow用户
发布于 2013-02-22 06:57:06
我按照下面的例子解决了同样的问题：
此示例使用jQuery JavaScript库。
首先，使用AjaxLoad site创建一个Ajax图标。
然后将以下内容添加到HTML中：
<img src="/images/loading.gif" id="loading-indicator" style="display:none" />并将以下内容添加到CSS文件中：
#loading-indicator {
position: absolute;
left: 10px;
top: 10px;
}最后，您需要连接到jQuery提供的Ajax事件；一个事件处理程序用于Ajax请求的开始，另一个事件处理程序用于Ajax请求的结束：
$(document).ajaxSend(function(event, request, settings) {
$('#loading-indicator').show();
});
$(document).ajaxComplete(function(event, request, settings) {
$('#loading-indicator').hide();
});此解决方案来自以下链接。How to display an animated icon during Ajax request processing
Stack Overflow用户
发布于 2014-04-09 22:41:11
有一个使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11961438
复制相关文章
相似问题