jquery - 动画 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" />

笔记本电脑解决方案

以下内容在笔记本电脑上运行良好，但似乎不适用于大多数移动设备。想知道为什么!!!

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

Answer 1

你正在使用 asp:ImageButton 并使用 OnClientClick 来处理 js 调用，所以当它被点击时显然是 js 将被调用，但同时页面将被回发(刷新)。所以当页面刷新时 gif 不会动画(我可以说这是浏览器问题，阅读这个 - gif animation not playing on refresh)。所以它让它工作，你需要从 js 调用使用以下返回 false。

OnClientClick="return AnimateGif();" -- 在 aspx 代码中。

在javascript代码中:

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