在asp.net中单击按钮时如何显示/隐藏gif图像答案

【问题标题】：How to show/hide gif image when button click in asp.net在asp.net中单击按钮时如何显示/隐藏gif图像
【发布时间】：2010-12-19 20:08:17
【问题描述】：

我有一个 asp 页面，其中有一个按钮。当我单击按钮时，我应该显示一个 gif 图像。当该过程完成时，图像必须再次隐藏。

请在后面找到我下面的代码

<head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript" language="javascript">

    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div style="display: none" id="dvloader">
            <img src="Images/process_status.gif" /></div>
        <asp:Button ID="btnLoad" runat="server" Text="Load" OnClick="btnLoad_Click" />
    </form>
</body>

请在后面找到下面的代码

 protected void btnLoad_Click(object sender, EventArgs e)
    {
       // Show the gif image
        System.Threading.Thread.Sleep(5000);
        // hide the gif image
    }

我怎样才能做到这一点？

谢谢。

【问题讨论】：

你需要一些进度条之类的东西吗？

标签： asp.net javascript jquery gif

【解决方案1】：

您示例中的方法是服务器端的。您要做的是在客户端，因此必须在 javascript 中完成。

您可以在单击按钮后使用客户端的 onclick 事件来显示 GIF。您可以在 Page-Load 方法中设置客户端的 onclick-event somwhere，例如：

btnLoad.Attributes.Add("onclick", "alert('JavaScript to show GIF goes here...');");

PostBack 后，GIF 会自动再次隐藏...

【讨论】：

它的工作，但 gif 图像不运动，会是什么问题？
嗯，这一定是浏览器相关问题。如果我没记错的话，IE 会在页面请求启动后立即停止动画 GIF。事实上，这个问题正是关于那个问题：stackoverflow.com/questions/1540079/…。我认为这个问题无法解决。你用其他浏览器有同样的效果吗？
我是一个新手，我希望这个答案有更多的上下文。您是否将建议的行添加到代码隐藏中？

【解决方案2】：

您实际上可以在不使用内联事件处理程序的情况下将事件应用到元素。

使用 jquery 你可以说：

 $(document).ready(function() {

$('#btnLoad').click(function(){alert('JavaScript to show GIF goes here...');});


});

这假设您的按钮的 id 为 btnload。

【讨论】：

但图像没有移动。它就像一个静态图像。但在设计模式下它会移动