Hiển thị hình ảnh tải trong khi $ .ajax được thực hiện

Tôi chỉ đang tự hỏi làm thế nào để hiển thị một hình ảnh cho biết rằng yêu cầu không đồng bộ đang chạy. Tôi sử dụng mã sau để thực hiện yêu cầu không đồng bộ:

$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  }
});

Có ý kiến ​​gì không?

Tất nhiên, bạn có thể hiển thị nó trước khi đưa ra yêu cầu và ẩn nó sau khi hoàn thành:

$('#loading-image').show();
$.ajax({
      url: uri,
      cache: false,
      success: function(html){
        $('.info').append(html);
      },
      complete: function(){
        $('#loading-image').hide();
      }
    });

Tôi thường thích giải pháp chung hơn là liên kết nó với các sự kiện ajaxStart và ajaxStop toàn cục, theo cách đó nó hiển thị cho tất cả các sự kiện ajax:

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

Sử dụng các hàm beforeSend và hoàn thành của đối tượng ajax. Tốt hơn là hiển thị gif từ bên trong beforeSend để tất cả các hành vi được gói gọn trong một đối tượng duy nhất. Hãy cẩn thận về việc ẩn gif bằng cách sử dụng hàm thành công. Nếu yêu cầu không thành công, bạn có thể vẫn muốn ẩn gif. Để làm điều này, hãy sử dụng chức năng Hoàn thành. Nó sẽ trông như thế này:

$.ajax({
    url: uri,
    cache: false,
    beforeSend: function(){
        $('#image').show();
    },
    complete: function(){
        $('#image').hide();
    },
    success: function(html){
       $('.info').append(html);
    }
});

Mã HTML :

<div class="ajax-loader">
  <img src="{{ url('guest/images/ajax-loader.gif') }}" class="img-responsive" />
</div>

Mã CSS:

.ajax-loader {
  visibility: hidden;
  background-color: rgba(255,255,255,0.7);
  position: absolute;
  z-index: +100 !important;
  width: 100%;
  height:100%;
}

.ajax-loader img {
  position: relative;
  top:50%;
  left:50%;
}

Mã JQUERY:

$.ajax({
  type:'POST',
  beforeSend: function(){
    $('.ajax-loader').css("visibility", "visible");
  },
  url:'/quantityPlus',
  data: {
   'productId':p1,
   'quantity':p2,
   'productPrice':p3},
   success:function(data){
     $('#'+p1+'value').text(data.newProductQuantity);
     $('#'+p1+'amount').text("₹ "+data.productAmount);
     $('#totalUnits').text(data.newNoOfUnits);
     $('#totalAmount').text("₹ "+data.newTotalAmount);
  },
  complete: function(){
    $('.ajax-loader').css("visibility", "hidden");
  }
});

}

"Hình ảnh" mà mọi người thường hiển thị trong khi gọi ajax là ảnh gif động. Vì không có cách nào để xác định phần trăm hoàn thành của yêu cầu ajax, các gif hoạt hình được sử dụng là các trình quay không xác định. Đây chỉ là một hình ảnh lặp đi lặp lại như một quả bóng tròn với nhiều kích cỡ khác nhau. Một trang web tốt để tạo spinner không xác định tùy chỉnh của riêng bạn là http://ajaxload.info/

Tôi nghĩ điều này có thể tốt hơn nếu bạn có hàng tấn cuộc gọi $ .ajax

$(document).ajaxSend(function(){
    $(AnyElementYouWantToShowOnAjaxSend).fadeIn(250);
});
$(document).ajaxComplete(function(){
    $(AnyElementYouWantToShowOnAjaxSend).fadeOut(250);
});

GHI CHÚ:

Nếu bạn sử dụng CSS. Phần tử bạn muốn hiển thị trong khi ajax đang tìm nạp dữ liệu từ mã back-end của bạn phải như thế này.

AnyElementYouWantToShowOnAjaxSend {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh; /* to make it responsive */
    width: 100vw; /* to make it responsive */
    overflow: hidden; /*to remove scrollbars */
    z-index: 99999; /*to make it appear on topmost part of the page */
    display: none; /*to make it visible only on fadeIn() function */
}

Tôi luôn thích BlockUIplugin: http://jquery.malsup.com/block/

Nó cho phép bạn chặn các phần tử nhất định của một trang hoặc toàn bộ trang trong khi yêu cầu ajax đang chạy.

Trước cuộc gọi của bạn, hãy chèn hình ảnh đang tải vào một div / span ở đâu đó và sau đó trên hàm thành công, hãy xóa hình ảnh đó. Ngoài ra, bạn có thể thiết lập một lớp css như tải có thể trông như thế này

.loading
{
    width: 16px;
    height: 16px;
    background:transparent url('loading.gif') no-repeat 0 0;
    font-size: 0px;
    display: inline-block;
}

Và sau đó gán lớp này cho một span / div và xóa nó trong hàm thành công

một cái gì đó như thế này:

$('#image').show();
$.ajax({
    url: uri,
    cache: false,
    success: function(html){
       $('.info').append(html);
       $('#image').hide();
    }
});

Bạn có thể thêm sự kiện bắt đầu và hoàn thành ajax, điều này hoạt động khi bạn nhấp vào sự kiện nút

 $(document).bind("ajaxSend", function () {
            $(":button").html('<i class="fa fa-spinner fa-spin"></i> Loading');
            $(":button").attr('disabled', 'disabled');
        }).bind("ajaxComplete", function () {
            $(":button").html('<i class="fa fa-check"></i> Show');
            $(":button").removeAttr('disabled', 'disabled');
        });

1. Tạo một phần tử tải ví dụ một phần tử có id = example_load.
2. Ẩn nó theo mặc định bằng cách thêm style = "display: none;".

3. Bây giờ hãy hiển thị nó bằng cách sử dụng hàm phần tử hiển thị jquery ngay trên ajax của bạn.

   $('#example_load').show(); $.ajax({ type: "POST", data: {}, url: '/url', success: function(){ // Now hide the load element $('#example_load').hide(); } });