加载页面时将光标更改为忙

Question

我了解如何在页面制作和 ajax 调用时使用 javascript 将光标更改为忙碌。

但是我有一个不使用 ajax 的页面，它使用回传来重新加载页面。然而，负载是相当数据密集型的，需要几秒钟。在此期间用户仍然可以点击页面。我想将光标转到“等待”，这样用户就不会尝试单击该页面。

例如，我有几个导致回发的下拉菜单。我进行了选择，页面加载了 3 秒。当它加载时，我希望光标转向等待，这样用户在页面重新加载之前不会尝试在第二个下拉列表中进行选择。

这可能吗？

附加信息：（我的设置的简化版本）

我有一个主页：

 <form id="form1" runat="server">
<table width = "100%" bgcolor="White">
<tr><td>
<h3><asp:ContentPlaceHolder id="MAIN" runat="server"></asp:ContentPlaceHolder></h3>
</tr></td>
</table>
</form>
<script type="text/javascript">
    function cursorwait(e) {
        document.body.style.cursor = 'wait';
    }

    var fm = document.getElementById('<% =form1.ClientID %>');
    if (fm.addEventListener) {
        fm.addEventListener('submit', cursorwait, false);
    }
    else {
        fm.attachEvent('onsubmit', cursorwait);
    }
</script>

然后是使用母版页的页面：

 <asp:Content ID="Content1" ContentPlaceHolderID="MAIN" Runat="Server">
<table runat=server id="tb_simple_search_table" cellpadding = 0 cellspacing = 0>
<tr><td>
    <asp:DropDownList...
    <asp:DropDownList...
</td></tr>
</table>
</asp:content>

原文由 kralco626 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以向表单的 submit 事件添加处理程序。

CSS

     .wait, .wait * { cursor: wait; }

JavaScript

 function cursorwait(e) {
    document.body.className = 'wait';
}

var fm = document.getElementById('<% =form1.ClientID %>');
var proxySubmit = fm.onsubmit;

fm.onsubmit = function () {
    cursorwait();
    if (proxySubmit) {
        proxySubmit.call(fm);
    }
}

在这里，我们确保我们的方法被调用，如果 submit() 在 js 中被调用，就像下拉菜单在导致回发时所做的那样。这也应该捕获表单提交的任何其他实例。

原文由 lincolnk 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我不确定这是否是最好或最有效的方法，但如果您想在单击按钮后更改光标以显示页面繁忙，则以下 jQuery 应该可以解决问题：

 $(document).ready(function() {
    $(".button").click(function() {
        $("*").css("cursor", "wait");
    });
});

原文由 Andy Rose 发布，翻译遵循 CC BY-SA 2.5 许可协议