Question

我有一个Home.html，其登录表单为POSTS to login.aspx login.aspx花了很多时间来加载......

所以我希望有一个基于javascript的功能，即时我点击登录按钮，必须显示加载器...在后台发生POST，然后必须加载aspx页面，然后模式必须重定向到aspx页面。

类似于gmail.com登录加载程序.....但仅使用javascript。（我也使用缩小的jquery js）（中间没有aspx页面）

请注意，我不能使用任何基于asp的装载机！

我尝试过使用：

http://blogs.msdn.com/naitik/archive/2008/07/31/show-loading-message-while-web-page-is-processing.aspx
（它不能快速工作。它首先重定向到POSTed页面）

提前致谢..

Answer 1

如果您只想显示“请稍候......”，请将自己附加到表单“onsubmit”事件。然后显示“请稍候”消息（使DIV可见）。完成后，表单将被提交并等待login.aspx。

如果您想要一个进度条，您有两种方法： *发布到将加载login.aspx的隐藏iframe。 *或使用XmlHttpRequest加载login.aspx。

在这两种情况下，login.aspx都必须吐出更新进度条的消息（您在客户端上解释的JScript或DIV片段）。

您会在Google中找到大量示例。例如，尝试“jscript progress bar aspx”。

勒

Answer 2

查看以下链接，因为它是“Loader”所需的代码，样式和布局。

我已经使用了代码，它可以100％运行

您的页面需要Div：

 <div class="modal"></div>

div的一些CSS样式：

/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
speak for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://sampsonresume.com/labs/pIkfp.gif') 
                50% 50% 
                no-repeat;
 }

 /* When the body has the loading class, we turn
    the scrollbar off with overflow:hidden */
 body.loading {
     overflow: hidden;   
 }

 /* Anytime the body has the loading class, our
    modal element will be visible */
 body.loading .modal {
      display: block;
 }

然后最后一点javascript来启动和停止（隐藏和显示）加载器：

START：

 $(this).addClass("loading");

STOP：

 $(this).removeClass("loading");

来源：http://jsfiddle.net/jonathansampson/VpDUG/170/

javascript仅在aspx之前加载...就像gmail.com登录加载器一样

2 个答案: