在函数完成时显示加载动画

本文关键字：加载 动画 显示 完成时 函数 | 更新日期: 2023-09-27 18:33:43

我的.aspx.cs代码中有一个函数，它需要很长时间来处理，直到我想显示一个很酷的加载动画。
我查看了一些早期的帖子，但这些帖子要么对我不起作用，要么有特定于页面加载场景的解决方案（在函数完成时不加载）。

我想正确的方法是在主函数启动之前触发一个 Javascript startLoader（） 函数（这需要很长时间），然后从.aspx.cs本身调用 stopLoader（） 以在函数结束时停止加载器。有什么建议如何实现吗？

在函数完成时显示加载动画

是的，我已经在 Web From ASP.NET（不是 ASP.NET MVC 解决方案）中完成了此操作。您需要提供 OnSubmit 客户端事件处理程序。它基本上分为三个部分：Javascript，HTML Div和后面的一行代码：

贾夫文：

    function ShowLoading(e) {
        // var divBg = document.createElement('div');
        var divBg = document.getElementById('blockScreen');
        var divLoad = document.createElement('div');
        var img = document.createElement('img');
        img.src = 'images/ajax-loader.gif';
        divLoad.setAttribute("class", "blockScreenLoader");
        divLoad.appendChild(img);
        divBg.appendChild(divLoad);
        document.getElementById('blockScreen').style.display = 'block';
        // These 2 lines cancel form submission, so only use if needed.
        //window.event.cancelBubble= true;
        //e.stopPropagation();
    }
    function HideLoading() {
        //alert('hideloading');
        document.getElementById("form1").onsubmit = null;
        document.getElementById('blockScreen').style.display = 'none';
        //alert('done');
    }

添加以下 DIV

 <div id="blockScreen" class="blockScreen" style="display:none">&nbsp;</div>

最后，将以下内容添加到代码隐藏Page_Load。

 Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), "submit", "ShowLoading()");

现在，您的所有页面回发基本上都必须调用 onsubmit 事件。它将在页面回发完成之前显示动画。

如果你真的想这样做，那么唯一的办法就是网络工作者。您可能听说过它们，或者如果没有，我强烈建议您看一看。

是的，在 OnClienc 上触发 startLoader（） 单击您的按钮或您用于触发服务器端事件的任何元素，并在进程结束时从服务器端调用 stopLoader（）。像这样：

//rest of the server-side code above ...
Page.ClientScript.RegisterStartupScript(this.GetType(), "someKey", "stopLoader();", true);

如果您不介意浏览器在此期间没有响应，最简单的方法是使用动画 gif：

  • 活动指标
  • ajaxload.info
  • 网络脚本实验室

诀窍是在开始处理时显示图像，并在完成后将其隐藏。你可以在img中显示它，并使用jQuery或任何你想要显示/隐藏它的东西。

如果您需要浏览器保持响应，请使用 Web Workers。但请注意，某些较旧的浏览器不支持它。请参阅此参考

相关文章：