Reload GIF em pagina asp.net com click botao

Question

boa tarde pessoal.

tenho a minha pagina web onde tem um botão e quando clico neste mesmo aparece uma imagem gif carregando durante 6 segundos. só que esta animação é fixa, ou seja, o próprio gif faz a animação uma vez só e não é infinito.

o que pretendo é que cada vez que faço click no botão que esta imagem é recarregada para fazer a animação inicial. tenho a imagem dentro de um updatePanel que faz um postack apos o click, mas a proxima vez que faço click no botão já nao aparece a animação.

como posso resolver isso.

Answer 1

Olá,

Você pode usar jQuery (exemplo: http://article.onlinewebtool.com/display-loading-image-after-clicking-on-a-submit-button-java-script-jquery/)

Ou pode usar o UpdateProgress do asp.net.

 É só você adicionar o UpdateProgress  na página, e no atributo AssociatedUpdatePanelID você informa o ID do updatePanel que tem o botão.

 <asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="Updade Panel">
                    <ProgressTemplate>
                      <!--Aqui vai o gif em html <img src ...-->
                    </ProgressTemplate>
                </asp:UpdateProgress>

OBS: O gif no UpdateProgress  fica aparecendo enquanto existir processamento de algum evento na página.

Espero que eu tenha entendido sua dúvida.

Att,

Naiade Lima

Answer 2

Olá, Flavio.

Uma alternativa, já que seu gif não é infinito, seria adicionar a imagem na página somente quando o click do botão for disparado, utilizando jQuery. Assim, no postback, a imagem não existiria mais e no próximo click funcionaria novamente.

$("#div").append("<img src='../img.gif' />");

Espero ter ajudado.

Abraço.

Answer 3

bom dia, 

utilizei o teu método, apareceu o gif no primeiro click. só que depois quando eu faço click no botão novamente o gif aparece mas sem animação. o que falta para este gif recarregar novamente a animação cada vez que faço click no botao?

meu codigo de click do botao

$('#go').click(function () {
$("#divProcessando").append("<img src='Imagens/img.gif' />");
});

tenho meu div onde vai ficar a imagem

<div id="divProcessando">
       <img >
 </div>

e tenho o meu botao que dispara esse gif e outros processamentos..

<button id="go" type="button" style="background-color: #787878; height: 5px; width: 8px;">
                            ...</button>