$ .Ajax gerçekleştirilirken yükleme resmini göster

Asenkron isteğin çalıştığını gösteren bir resmin nasıl gösterileceğini merak ediyorum. Zaman uyumsuz bir istek gerçekleştirmek için aşağıdaki kodu kullanıyorum:

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

Herhangi bir fikir?

Elbette, istekte bulunmadan önce bunu gösterebilir ve tamamlandıktan sonra gizleyebilirsiniz:

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

Genellikle bunu global ajaxStart ve ajaxStop olaylarına bağlamanın daha genel çözümünü tercih ederim, bu şekilde tüm ajax olayları için görünür:

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

Ajax nesnesinin beforeSend ve complete işlevlerini kullanın. Gif'i göndermeden önce içeriden göstermek daha iyidir, böylece tüm davranış tek bir nesnede kapsüllenir. Başarı işlevini kullanarak gif'i gizlerken dikkatli olun. İstek başarısız olursa, muhtemelen yine de gif'i gizlemek isteyeceksiniz. Bunu yapmak için Tam işlevini kullanın. Şöyle görünecek:

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

HTML Kodu :

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

CSS Kodu:

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

JQUERY Kodu:

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

}

Bir ajax çağrısı sırasında insanların genellikle gösterdiği "görüntü" animasyonlu bir giftir. Ajax isteğinin tamamlanma yüzdesini belirlemenin bir yolu olmadığından, kullanılan animasyonlu gifler belirsiz döndürücülerdir. Bu, farklı boyutlarda dairelerden oluşan bir top gibi sürekli tekrar eden bir görüntüdür. Kendi özel belirsiz eğiricinizi oluşturmak için iyi bir site http://ajaxload.info/

Tonlarca .ajax aramanız varsa bu daha iyi olabilir.

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

NOT:

CSS kullanıyorsanız. Ajax arka uç kodunuzdan veri alırken gösterilmesini istediğiniz öğe böyle olmalıdır.

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

BlockUIEklentiyi her zaman sevmişimdir : http://jquery.malsup.com/block/

Bir ajax isteği çalışırken bir sayfanın belirli öğelerini veya tüm sayfayı engellemenizi sağlar.

Çağrınızdan önce yükleme resmini bir yere bir div / span'a ekleyin ve ardından başarı fonksiyonunda bu resmi kaldırın. Alternatif olarak, yükleme gibi bir css sınıfı da kurabilirsiniz.

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

Ve sonra bu sınıfı bir span / div'e atayın ve başarı fonksiyonunda temizleyin

bunun gibi bir şey:

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

Ajax başlatma ve tamamlama etkinliği ekleyebilirsiniz, bu, düğme olayına tıkladığınızda çalışır

 $(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. Örneğin id = example_load ile bir eleman için bir yükleme elemanı oluşturun.
2. Style = "display: none;" ekleyerek varsayılan olarak gizleyin.

3. Şimdi bunu ajax'ınızın hemen üzerinde jquery show element işlevini kullanarak gösterin.

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