버튼을 로딩 GIF로 바꾸기

Question

나는 제출 버튼을 loading.gif로 바꾸려고하는데, 어쨌든 같은 위치에 넣을 수는 없습니다. 버튼이 숨겨져 있지만 공간은 여전히 ​​예약 된 것처럼 보입니다.

$("#bt_pagamento").click(function() { 
             $(this).css({'display':'none'}); 
            $("#bt_loading").show(); 
       }); 

그리고 내 CSS는 다음과 같습니다 :

는

<div class="botao"> 
    <input type="image" disabled src="images/bl_button.jpg" id="bt_pagamento" alt="EFETUAR PAGAMENTO" title="EFETUAR PAGAMENTO" /> 
</div> 
<div class="loading"> 
    <input type="image" src="images/loading.gif" id="bt_loading" alt="CARREGANDO PAGAMENTO" title="CARREGANDO PAGAMENTO" /> 
</div> 

내 jQuery 코드는 내 HTML입니다

#main_content .pagamentos .botao { 
width: 151px; 
height: 33px; 
float: left; 
margin: 20px 0 20px 325px; 
text-align: center; 
} 

#main_content .pagamentos .loading { 
width: 151px; 
height: 33px; 
float: left; 
margin: 20px 0 20px 325px; 
text-align: center; 
} 

은 누군가가 나에게 그것에 몇 가지 도움을 줄 수 있을까?

Answer 1

최상의 솔루션은 별도의 "로드 중"요소를 추가하는 대신 단추를로드 아이콘으로 표시하는 클래스를 추가하는 것입니다. http://jsfiddle.net/4rLgw/1/

HTML :

<div class="botao"> 
    <button id="bt_pagamento" class="bl_button" title="EFETUAR PAGAMENTO"></button> 
</div> 

CSS :

.bl_button { 
    background: url('images/bl_button.jpg') no-repeat 50% 50%; 
    height: 35px; /* height of your button image */ 
    width: 100px; /* width of your button image */ 
} 

.button_loading { 
    background: url('images/loading.gif') no-repeat 50% 50%; 
    /* apply other styles to "loading" buttons */ 
} 

jQuery를 :

예를 들어

버튼이 클릭되면 http://jsfiddle.net/4rLgw/1/

상기 .button_loading 클래스 버튼에 적용되고, 백그라운드 이미지는 AJAX 로딩 아이콘으로 변경된다 : 여기

$("#bt_pagamento").click(function() { 
    $(this).addClass('button_loading'); 
}); 

는 동작 예이다. 로딩 버튼에 특정 스타일을 추가하여 더욱 독특하게 보이게 할 수 있습니다.