jQuery AJAX 호출에 대한 로딩 표시기 구현


88

링크에서 시작되는 부트 스트랩 모달이 있습니다. 약 3 초 동안 AJAX 쿼리가 데이터베이스에서 데이터를 가져 오는 동안 빈 공간에 있습니다. 어떤 종류의 로딩 표시기를 어떻게 구현할 수 있습니까? 트위터 부트 스트랩은 기본적으로이 기능을 제공합니까?

편집 : 모달 용 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>

답변:


40

모달을로드하기 위해 jQuery.get 또는 다른 jQuery ajax 함수를 사용하고 있다고 생각합니다. ajax 호출 전에 표시기를 표시하고 ajax가 완료되면 숨길 수 있습니다. 같은 것

$('#indicator').show();
$('#someModal').get(anUrl, someData, function() { $('#indicator').hide(); });

164

이 예제에 따라 동일한 문제를 해결했습니다.

이 예제는 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 요청 처리 중에 애니메이션 아이콘을 표시하는 방법


"한 번만 수행"후킹 메커니즘에 +1. 그러나 고정 로딩 표시기는 일반적으로 로딩 표시기를 부분적으로 숨기는 오버레이가있는 모달에 적합하지 않습니다.이 경우 모달 내부에 로딩 표시기를 배치하는 것이 좋습니다 (예 : 제목 표시 줄). 또는 오버레이 위에 표시되도록 표시기에 높은 Z- 색인을 추가 하시겠습니까?
Pierre Henry

3
안녕하세요, 모두 ... 이 답변을 기반으로 한 데모 를 참조하십시오 .
폴 바 가스

JQuery 스크립트에 대한 참조 뒤에 해당 스크립트를 배치하는 것을 잊지 마십시오. 페이지 내 배치 순서가 역순이기 때문에 한 시간을 보냅니다.
Greg Z.

그것은 같은 소리 ajaxStart()ajaxStop()AJAX 배치 당 한 번만이 화재로 @ajaristi 대답에 따라 더 나은 솔루션이 될 것입니다 : stackoverflow.com/questions/3735877/...
SharpC

30

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/


1
이것은 매우 잘 작동하지만 모달을 사용하는 사이트에 Z- 색인 CSS를 추가하는 것을 잊지 마십시오.
Deise Vicentin 2016

1
올바르게 사용 .ajaxStart()하고 ajaxStop()AJAX 배치 당 한 번 실행 되므로 @leansy 답변보다 더 많은 표를 가져야합니다 : stackoverflow.com/questions/3735877/… .
SharpC

14

로딩 표시기는 AJAX 요청에서 completed 이벤트가 호출 될 때까지 표시되는 단순히 애니메이션 이미지 (.gif)입니다. http://ajaxload.info/ 는 모달에 오버레이 할 수있는 로딩 이미지를 생성하기위한 많은 옵션을 제공합니다. 내가 아는 한, Bootstrap은 내장 기능을 제공하지 않습니다.


6

다음은 새로 고쳐야하는 원격 콘텐츠를로드하는 방법입니다.

$(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');
    });
});

기본적으로로드하는 동안 모달 콘텐츠를로드 메시지로 바꿉니다. 로드가 완료되면 콘텐츠가 교체됩니다.


3

이것이 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>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.