改变光标繁忙而页面加载 [英] change cursor to busy while page is loading

问题描述

我知道如何使用JavaScript，将光标移到忙碌而页面制作和AJAX调用。

不过，我有一个不使用AJAX一个页面，它使用了一个回传重新加载页面。然而负载是相当数据密集，它需要几秒钟。在此期间，用户仍然可以点击页面上。我想将光标移动到等待，因此用户不会尝试点击页面上。

例如我有一对夫妇的回发的下拉列表中。我做出选择，并在页面加载3秒。虽然它加载我想光标转向等待，因此用户不会尝试作出一个第二个下拉菜单选择，直到重新加载页面。

这可能吗？

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

我有一个母版：

 ＆LT;表ID =form1的=服务器＆GT;
＆LT;表格的宽度=100％的bgcolor =白＆GT;
＆所述; TR＆GT;＆下; TD＆GT;
＆LT; H3＆GT;＆LT; ASP：的ContentPlaceHolder ID =MAIN=服务器＆GT;＆LT; / ASP：＆的ContentPlaceHolder GT;＆LT; / H3 GT＆;
＆LT; / TR＆GT;＆LT; / TD＆GT;
＆LT; /表＆gt;
＆LT; /表及GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
    功能cursorwait（五）{
        document.body.style.cursor =等待;
    }    VAR FM =的document.getElementById（'＆LT;％= form1.ClientID％GT;'）;
    如果（fm.addEventListener）{
        fm.addEventListener（'提交'，cursorwait，FALSE）;
    }
    其他{
        fm.attachEvent（'的onsubmit'，cursorwait）;
    }
＆LT; / SCRIPT＆GT;
 

，然后使用该母版页的页面：

 ＆LT; ASP：内容ID =内容1ContentPlaceHolderID =MAIN=服务器＆GT;
＆LT;表RUNAT =服务器ID =tb_simple_search_table的cellpadding = 0 CELLSPACING = 0＆GT;
＆所述; TR＆GT;＆下; TD＆GT;
    ＆LT; ASP：DropDownList中...
    ＆LT; ASP：DropDownList中...
＆LT; / TD＆GT;＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / ASP：内容＆GT;
 

解决方案

您可以将处理程序添加到表单的提交事件。

CSS

  .wait，.wait * {光标：等待; }
 

的JavaScript

 函数cursorwait（五）{
    document.body.className =等待;
}VAR FM =的document.getElementById（'＆LT;％= form1.ClientID％GT;'）;
VAR proxySubmit = fm.onsubmit;fm.onsubmit =功能（）{
    cursorwait（）;
    如果（proxySubmit）{
        proxySubmit.call（FM）;
    }
}
 

在这里我们可以确保我们的方法被调用，如果提交（）被称为像一滴往下JS做时，它会导致回发。这也应该抓住形式提交的任何其他实例。

I understand how to use javascript to change the cursor to busy while the page is making and ajax call.

However I have a page that does not use ajax, it uses a postback to reload the page. However the load is rather data intensive and it takes a few seconds. During this time the user can still click on the page. I want to turn the cursor to "waiting" so the user does not try to click on the page.

For example I have a couple of dropdowns that cause postback. I make a selection and the page loads for 3 seconds. While it loads I would like the cursor to turn to waiting so the user does not try to make a selection on a second dropdown until the page reloads.

Is this possible?

Additional Info: (simplified version of my setup)

I have a masterpage:

<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>

and then a page that uses the master page:

<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>

解决方案

you can add a handler to the form's submit event.

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);
    }
}

here we're ensuring our method gets called if submit() is called in js like the drop down does when it causes a postback. this should also catch any other instances of the form submitting.

这篇关于改变光标繁忙而页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！