Tampilkan gambar pemuatan saat $ .ajax dilakukan

Saya hanya ingin tahu bagaimana cara menampilkan gambar yang menunjukkan bahwa permintaan async sedang berjalan. Saya menggunakan kode berikut untuk melakukan permintaan asinkron:

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

Ada ide?

Anda dapat, tentu saja, menampilkannya sebelum membuat permintaan, dan menyembunyikannya setelah selesai:

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

Saya biasanya lebih suka solusi yang lebih umum untuk mengikatnya ke acara ajaxStart dan ajaxStop global, dengan cara itu ia muncul untuk semua acara ajax:

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

Gunakan fungsi beforeSend dan complete objek ajax. Lebih baik menampilkan gif dari dalam beforeSend sehingga semua perilaku dikemas dalam satu objek. Berhati-hatilah saat menyembunyikan gif menggunakan fungsi sukses. Jika permintaan gagal, Anda mungkin masih ingin menyembunyikan gif. Untuk melakukan ini gunakan fungsi Lengkap. Ini akan terlihat seperti ini:

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

Kode HTML:

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

Kode 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%;
}

Kode 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");
  }
});

}

"Gambar" yang biasanya ditampilkan orang selama panggilan ajax adalah gif animasi. Karena tidak ada cara untuk menentukan persen penyelesaian permintaan ajax, gif animasi yang digunakan adalah pemintal tak tentu. Ini hanyalah gambar yang berulang-ulang seperti bola lingkaran dengan berbagai ukuran. Situs yang bagus untuk membuat pemintal tak tentu khusus Anda sendiri adalah http://ajaxload.info/

Saya pikir ini mungkin lebih baik jika Anda memiliki banyak panggilan $ .ajax

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

CATATAN:

Jika Anda menggunakan CSS. Elemen yang ingin Anda tunjukkan saat ajax mengambil data dari kode back-end Anda harus seperti ini.

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 */
}

Saya selalu menyukai BlockUIplugin ini: http://jquery.malsup.com/block/

Ini memungkinkan Anda untuk memblokir elemen tertentu dari halaman, atau seluruh halaman saat permintaan ajax sedang berjalan.

Sebelum panggilan Anda, masukkan gambar pemuatan dalam div / span di suatu tempat dan kemudian pada fungsi sukses hapus gambar itu. Atau, Anda dapat menyiapkan kelas css seperti memuat yang mungkin terlihat seperti ini

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

Dan kemudian tetapkan kelas ini ke span / div dan hapus dalam fungsi sukses

sesuatu seperti ini:

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

Anda dapat menambahkan acara ajax start dan complete, ini berfungsi ketika Anda mengklik tombol event

 $(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. Buat elemen beban misalnya elemen dengan id = example_load.
2. Sembunyikan secara default dengan menambahkan style = "display: none;".

3. Sekarang tunjukkan menggunakan fungsi elemen jquery show tepat di atas ajax Anda.

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