버튼을 클릭하면 애니메이션 로드 표시

버튼을 클릭하면 애니메이션 로드 표시

나는 아주 간단한 것을 하고 싶다.내 페이지에는 버튼이 하나 있다.

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

여기서 원하는 것은 사용자가 이 송신 버튼을 누르는 것입니다.서버로부터 응답을 얻을 때까지 gif 애니메이션을 "로드"하는 것을 나타냅니다.

하지만 나는 오랫동안 힘들었다.

어떻게 구현하면 좋을까요?

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 에러 콜백에서도 이미지를 숨김으로써 ajax가 실패해도 gif가 숨김을 확인합니다.

해라

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

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

 });
});

편집: 댓글을 읽은 후

만약 당신이 아약스를 반대하기로 결정한다면

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

성공할 때까지 Ajax 콜의 특정 div를 로드하여 차단하는 최선의 방법은 Blockui입니다.

http://www.malsup.com/jquery/block/ #http://http://www.malsup.com/jquery/block/ 를 참조해 주세요.

사용 예:

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

}
});

이것이 정말로 도움이 되기를 바랍니다. 그것이 매우 인터랙티브합니다.

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

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

답장이 많이 늦은 건 알지만 최근에 이 질문을 보고 작업 시나리오를 찾았습니다.

OnClick of Submit에서 다음 코드를 사용합니다.

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

Gif를 정지하려면 다음 코드를 사용합니다.

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

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

언급URL : https://stackoverflow.com/questions/15288002/show-loading-animation-on-button-click