Показать анимацию «загрузки» нажатием кнопки

Я хочу сделать что-то очень простое. У меня есть одна кнопка на моей странице.Показать анимацию «загрузки» нажатием кнопки

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

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

Но я боролся с тех пор, как долго.

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

источник

2013-03-08 Fraz

вы с помощью Ajax ?? или просто размещение формы? – bipen

Я тоже могу использовать ajax ... но сейчас это все. – Fraz

Возможный дубликат [Jquery Ajax Загрузка изображения] (http://stackoverflow.com/questions/8761713/jquery-ajax-loading-image) –

попробовать

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

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

}); 
});

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

в случае, если вы решите против AJAX

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

источник

2013-03-08 06:27:31 dakait

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

Добавить загрузки GIF изображения в HTML и сделать ее скрытой (используя стиль в самой HTML сейчас, вы можете добавить его в отдельные CSS):
```
<img src="path\to\loading\gif" id="img" style="display:none"/ > 
```

Показать изображение при нажатии кнопки и скрыть его снова на успех функция

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

Убедитесь, что вы скрыть изображение на АЯКС ошибки обратных вызовов слишком, чтобы убедиться, GIF скрывает даже если Аякса не удается.

источник

2013-03-08 06:30:37 bipen

Вы должны использовать полный обратный вызов, чтобы скрыть изображение, а не вызвать его в двух местах. – kmkemp

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

     }, 
     complete : function() { 
      //remove loading gif 
     } 
    }); 
});

источник

2013-03-08 06:52:35 Angel

Лучшая загрузка и блокировании этот конкретный 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' } 
    }); 

} 
});

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

источник

2013-03-08 06:53:27

  //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() { 
        }) 
       }); 
      });

источник

2014-03-18 17:33:08

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

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

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

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

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

источник

2017-05-25 09:59:03

Показать анимацию «загрузки» нажатием кнопки

ответ

Смежные вопросы