it-roy-ru.com

Показывать анимацию загрузки при нажатии кнопки

Я хочу сделать что-то очень простое ... У меня есть одна кнопка на моей странице.

<form action="/process" method="POST">
   <input class="btn btn-large btn-primary" type="submit" value='Analyze Topics'>
    </form>

Теперь я хочу, чтобы пользователь нажимал кнопку «Отправить». Он показывает, что «загружает» gif-анимацию, пока не получит ответ от сервера.

Но я боролся с давних пор.

Как мне это реализовать?

26
Fraz

Если вы используете ajax, то (сделать это как можно проще)

  1. Добавьте изображение загрузки gif в html и сделайте его скрытым (теперь, используя стиль в самом html, вы можете добавить его в отдельный CSS):

    <img src="path\to\loading\gif" id="img" style="display:none"/ >
    
  2. Показать изображение при нажатии кнопки и скрыть его снова в функции успеха

    $('#buttonID').click(function(){
      $('#img').show(); //<----here
      $.ajax({
        ....
       success:function(result){
           $('#img').hide();  //<--- hide again
       }
    }
    

Убедитесь, что вы также скрываете изображение в ответных сообщениях об ошибках AJAX, чтобы убедиться, что GIF скрывается, даже если AJAX не работает.

33
bipen

пытаться 

$("#btnId").click(function(e){
 e.preventDefault();
 //show loading gif

 $.ajax({
  ...
  success:function(data){
   //remove gif
  },
  error:function(){//remove gif}

 });
});

Правка: после прочтения комментариев 

если вы решите против AJAX

$("#btnId").click(function(e){
     e.preventDefault();
     //show loading gif
     $(this).closest('form').submit();
});
6
dakait

Лучшая загрузка и блокировка этого конкретного div для вызова ajax до тех пор, пока он не будет успешным, это Blockui

перейдите по этой ссылке http://www.malsup.com/jquery/block/#element

пример использования:

 <span class="no-display smallLoader"><img src="/images/loader-small.png" /></span>

скрипт

jQuery.ajax(
{   
 url: site_path+"/restaurantlist/addtocart",
 type: "POST",
 success: function (data) {
   jQuery("#id").unblock(); 
},
beforeSend:function (data){
    jQuery("#id").block({ 
    message: jQuery(".smallLoader").html(), 
    css: { 
         border: 'none', 
         backgroundColor: 'none'
    },
    overlayCSS: { backgroundColor: '#afafaf' } 
    });

}
});

надеюсь, это поможет действительно очень интерактивно.

5
Rajat Modi
$("#btnId").click(function(e){
      e.preventDefault();
      $.ajax({
        ...
        beforeSend : function(xhr, opts){
            //show loading gif
        },
        success: function(){

        },
        complete : function() {
           //remove loading gif
        }
    });
});
3
Angel
            //do processing
            $(this).attr("label", $(this).text()).text("loading ....").animate({ disabled: true }, 1000, function () {
                //original event call
                $.when($(Elm).delay(1000).one("click")).done(function () {//processing finalized
                    $(this).text($(this).attr("label")).animate({ disabled: false }, 1000, function () {
                    })
                });
            });
0
Mohamed.Abdo

Я знаю, что это очень запоздалый ответ, но я недавно видел этот запрос И нашел рабочий сценарий,

OnClick of Submit используйте следующий код:

 $('#Submit').click(function ()
 { $(this).html('<img src="icon-loading.gif" />'); // A GIF Image of Your choice
 return false });

Чтобы остановить Gif, используйте следующий код:

$('#Submit').ajaxStop();

0
Anil Baggio