Анимированный GIF не запускает анимацию после отображения

Question

Я пытаюсь отобразить анимированный GIF после нажатия кнопки. Изображение отображается правильно, но оно не запускается. Я пробовал много методов (обертывая его с помощью div, SetTimeOut ...), но ни один из них не может отображать анимированный GIF на ноутбуках и мобильных устройствах. Некоторые методы работают на ноутбуках, но не на мобильных устройствах, таких как установка тайм-аута в javascript. Вот код. Как я могу заставить его работать как для ноутбуков и мобильных устройств:

<script> 
function AnimateGif() 
{   
$("#anim_upload").css("display", ""); 
} 
</script> 

<asp:ImageButton CssClass="uploadedFile_btn" runat="server" ImageUrl="icon-upload2.png" ID="uploadedFile" OnClick="Button1_Click1" OnClientClick="AnimateGif();"/></div> 

<img alt="" src="anim_upload.gif" id="anim_upload" style="display:none" /> 

решение LAPTOP

Следующие хорошо работает на ноутбуках, но это, кажется, не работает на большинстве мобильных устройств. Интересно, почему!!!

<script> 
function AnimateGif() 
{   
setTimeout('document.getElementById("anim_upload").style.display = "block"', 200);  
} 
</script> 

Answer 1

Вы используете asp:ImageButton и используется для обработки OnClientClickjs вызова, поэтому, когда это будет нажата, очевидно js будет называться, но в то же время страницы будут размещены назад (обновляется). Поэтому, когда страница обновляется, gif не будет анимировать (я могу сказать, что это проблема с браузером, прочтите это - gif animation not playing on refresh). Таким образом, это заставляет его работать, вам нужно вернуть false из js.

OnClientClick="return AnimateGif();" - В коде aspx.

В коде JavaScript:

function AnimateGif() 
{   
    $("#anim_upload").css("display", "block"); 
    return false; 
}