Реализовать индикатор загрузки для вызова jQuery AJAX
У меня есть модальный Bootstrap, который запускается из ссылки. Около 3 секунд он просто сидит там пустой, в то время как запрос AJAX извлекает данные из базы данных. Как я могу реализовать какой-то индикатор загрузки? Предоставляет ли Twitter bootstrap эту функцию по умолчанию?
EDIT: код 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 ответов
Я предполагаю, что вы используете jQuery.получить или какую-либо другую функцию jQuery ajax для загрузки модального. Вы можете показать индикатор перед вызовом ajax и скрыть его, когда ajax завершится. Что-то вроде
$('#indicator').show();
$('#someModal').get(anUrl, someData, function() { $('#indicator').hide(); });
я решил ту же проблему, следуя этому примеру:
в этом примере используется библиотека JavaScript jQuery.
сначала создайте значок Ajax с помощью сайт AjaxLoad.
Затем добавьте следующий код HTML :
<img src="/images/loading.gif" id="loading-indicator" style="display:none" />
и следующее в ваш файл CSS:
#loading-indicator {
position: absolute;
left: 10px;
top: 10px;
}
наконец, вам нужно подключиться к событиям Ajax, которые предоставляет jQuery; один обработчик событий, когда начинается запрос Ajax, и один, когда он заканчивается:
$(document).ajaxSend(function(event, request, settings) {
$('#loading-indicator').show();
});
$(document).ajaxComplete(function(event, request, settings) {
$('#loading-indicator').hide();
});
Это решение находится по следующей ссылке. как отобразить анимированный значок во время обработки запроса Ajax
существует глобальная конфигурация с использованием 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>
вот демо:http://jsfiddle.net/sd01fdcm/
индикатор загрузки-это просто анимированное изображение (.gif), который отображается до тех пор, пока завершенное событие не будет вызвано по запросу AJAX. http://ajaxload.info/ предлагает множество опций для генерации изображений загрузки, которые вы можете наложить на свои модалы. Насколько мне известно, Bootstrap не предоставляет встроенную функциональность.
вот как я получил его работу с загрузкой удаленного контента, который должен быть обновлен:
$(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');
});
});
в основном, просто замените модальное содержимое во время загрузки сообщением загрузки. После завершения загрузки содержимое будет заменено.
Это, как я понял, индикатор загрузки на 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>