jQuery AJAX 호출 로드 표시기 구현
링크에서 기동하는 부트스트랩모달이 있어요AJAX 쿼리가 데이터베이스에서 데이터를 가져오는 동안 약 3초 동안 공백 상태로 유지됩니다.로딩 인디케이터를 구현하려면 어떻게 해야 합니까?트위터 부트스트랩은 기본적으로 이 기능을 제공합니까?
편집: 모달의 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>
이 예에 따라서, 같은 문제를 해결했습니다.
이 예에서는 jQuery JavaScript 라이브러리를 사용합니다.
먼저 AjaxLoad 사이트를 사용하여 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 요청 시작 시 이벤트 핸들러와 종료 시 이벤트 핸들러:
$(document).ajaxSend(function(event, request, settings) {
$('#loading-indicator').show();
});
$(document).ajaxComplete(function(event, request, settings) {
$('#loading-indicator').hide();
});
이 솔루션은 다음 링크에서 찾을 수 있습니다.Ajax 요청 처리 중 애니메이션 아이콘을 표시하는 방법
jQuery.get 또는 다른 jQuery ajax 함수를 사용하여 모드를 로드하고 있는 것 같습니다.Ajax 호출 전에 표시기를 표시하고 Ajax가 완료되면 숨길 수 있습니다.뭐랄까
$('#indicator').show();
$('#someModal').get(anUrl, someData, function() { $('#indicator').hide(); });
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/
로드 인디케이터는 단순히 AJAX 요청에서 완료된 이벤트가 호출될 때까지 표시되는 애니메이션 이미지(.gif)입니다.http://ajaxload.info/에서는 모달에 오버레이할 수 있는 로드 이미지를 생성하기 위한 다양한 옵션을 제공합니다.제가 알기로는 부트스트랩에는 기능이 내장되어 있지 않습니다.
갱신할 필요가 있는 리모트 컨텐츠의 로딩에 대해서는, 다음과 같이 작업을 실시했습니다.
$(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');
});
});
기본적으로 로드하는 동안 모달 콘텐츠를 로드 메시지로 대체하십시오.로드가 완료되면 콘텐츠가 교체됩니다.
글리피콘에 의한 로딩 인디케이터는 다음과 같습니다.
<!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>
언급URL : https://stackoverflow.com/questions/11961438/implement-a-loading-indicator-for-a-jquery-ajax-call
'programing' 카테고리의 다른 글
| 프레스 가능과 터치 가능의 차이 (0) | 2023.02.11 |
|---|---|
| jsx가 동작하지 않는다. (0) | 2023.02.11 |
| Mongo Network Error: 첫 번째 연결 시 [localhost:27017]서버에 연결하지 못했습니다[Mongo Network Error:connect ECONNREFUSED 127.0.1:27017] (0) | 2023.02.11 |
| 링크를 붙여 이미지를 중앙에 배치하다 (0) | 2023.02.11 |
| "불법 인수예외:Spring Boot 어플리케이션에서 관리 타입이 아님" (0) | 2023.02.11 |