Triển khai chỉ báo tải cho cuộc gọi jQuery AJAX

Tôi có một phương thức Bootstrap được khởi chạy từ một liên kết. Trong khoảng 3 giây, nó chỉ nằm ở đó trống, trong khi truy vấn AJAX lấy dữ liệu từ cơ sở dữ liệu. Làm cách nào để triển khai một số loại chỉ báo tải? Twitter bootstrap có cung cấp chức năng này theo mặc định không?

CHỈNH SỬA: Mã JS cho phương thức

<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>

Tôi đoán bạn đang sử dụng jQuery.get hoặc một số hàm ajax của jQuery khác để tải phương thức. Bạn có thể hiển thị chỉ báo trước lệnh gọi ajax và ẩn nó khi lệnh ajax hoàn tất. Cái gì đó như

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

Tôi đã giải quyết vấn đề tương tự theo ví dụ sau:

Ví dụ này sử dụng thư viện JavaScript jQuery.

Đầu tiên, tạo một biểu tượng Ajax bằng cách sử dụng trang AjaxLoad .
Sau đó, thêm phần sau vào HTML của bạn:

<img src="/images/loading.gif" id="loading-indicator" style="display:none" />

Và phần sau đối với tệp CSS của bạn:

#loading-indicator {
  position: absolute;
  left: 10px;
  top: 10px;
}

Cuối cùng, bạn cần kết nối với các sự kiện Ajax mà jQuery cung cấp; một trình xử lý sự kiện cho thời điểm yêu cầu Ajax bắt đầu và một trình xử lý khi nó kết thúc:

$(document).ajaxSend(function(event, request, settings) {
    $('#loading-indicator').show();
});

$(document).ajaxComplete(function(event, request, settings) {
    $('#loading-indicator').hide();
});

Giải pháp này là từ liên kết sau đây. Cách hiển thị biểu tượng động trong quá trình xử lý yêu cầu Ajax

Có một cấu hình chung sử dụng jQuery. Mã này chạy trên mọi yêu cầu ajax toàn cầu.

<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>

Đây là bản demo: http://jsfiddle.net/sd01fdcm/

Chỉ báo tải chỉ đơn giản là một hình ảnh động (.gif) được hiển thị cho đến khi sự kiện hoàn thành được gọi theo yêu cầu AJAX. http://ajaxload.info/ cung cấp nhiều tùy chọn để tạo hình ảnh tải mà bạn có thể phủ lên các phương thức của mình. Theo hiểu biết của tôi, Bootstrap không cung cấp chức năng tích hợp sẵn.

Đây là cách tôi làm cho nó hoạt động khi tải nội dung từ xa cần được làm mới:

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

Về cơ bản, chỉ cần thay thế nội dung phương thức trong khi tải bằng một thông báo đang tải. Sau đó, nội dung sẽ được thay thế sau khi tải xong.

Đây là cách tôi nhận ra chỉ báo tải bằng 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>