Показывать загружаемое изображение при выполнении $.ajax

Ответ 1

Вы можете, конечно, показать его перед тем, как сделать запрос, и скрыть его после завершения:

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

Обычно я предпочитаю более общее решение привязки его к глобальным событиям ajaxStart и ajaxStop, таким образом он появляется для всех событий ajax:

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

Ответ 2

Используйте объект ajax beforeSend и полные функции. Лучше показать gif изнутри beforeSend, чтобы все поведение было инкапсулировано в один объект. Будьте осторожны, скрывая gif, используя функцию успеха. Если запрос не удался, вы, вероятно, все же захотите скрыть gif. Для этого используйте функцию "Полный". Это будет выглядеть так:

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

Ответ 3

Код HTML:

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

Код 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%;
}

Код 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");
  }
});

}

Ответ 4

Люди, которые обычно отображаются во время вызова ajax, являются анимированными gif. Поскольку невозможно определить процент завершения запроса ajax, используемые анимированные gif являются неопределенными прядильщиками. Это просто изображение, повторяющееся снова и снова, как шар из кругов разного размера. Хороший сайт для создания собственного пользовательского неопределенного счетчика http://ajaxload.info/

Ответ 5

Мне всегда нравился плагин BlockUI: http://jquery.malsup.com/block/

Он позволяет блокировать определенные элементы страницы или всю страницу во время выполнения запроса ajax.

Ответ 6

Я думаю, что это может быть лучше, если у вас есть тонны вызовов $.ajax

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

НОТА:

Если вы используете CSS. Элемент, который вы хотите показать, когда ajax извлекает данные из вашего внутреннего кода, должен быть таким.

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

Ответ 7

Перед вызовом либо вставьте загружаемое изображение в div/span где-нибудь, а затем в функцию успеха удалите это изображение. В качестве альтернативы вы можете настроить класс css, например загрузку, которая может выглядеть так:

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

И затем назначьте этот класс span/div и очистите его в функции успеха

Ответ 8

что-то вроде этого:

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

Ответ 9

Вы можете добавить ajax start и complete, это работает, когда вы нажимаете на событие кнопки

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

Ответ 10

**strong text**Set the Time out to the ajax calls
function testing(){
    
    $("#load").css("display", "block");
    setTimeout(function(){
    $.ajax({
             type: "GET",

          
             url:testing.com,
            
             async: false,
             
             success : function(response){
           
             alert("connection established");

              
            },
            complete: function(){
            alert("sended");
            $("#load").css("display", "none");
         
           },
            error: function(jqXHR, exception) {
                       alert("Write error Message Here");
                  },


       });
     },5000);


  }

  .loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

<div id="load" style="display: none" class="loader"></div>
<input type="button"  onclick="testing()"  value="SUBMIT" >