java显示带有非JAX页面的加载对话框

Question

我对目前的情况感到担忧：

1. 在一些HTML页面中有一个链接

2. 当用户单击该链接时，一个NORMAL（vs Ajax）HTTP请求被发送到一个Web服务器（通常是一个Java Servlet）

3. 之后，浏览器当然会从服务器中获取内容并开始呈现。（实际上，这是一个包含修改内容的页面——不要要求我使用ajax，因为这是要求）

在完成第3步之前（在加载页面时），我需要向用户显示一些框架，比如loading ....

Answer 1

好吧，只要在页面上的某个地方填充一个div“Loading…”当点击链接时。这里有一些粗略的代码

$('#yourlink').click(function(){
   $('#loading').html('Loading....'); 
}); 


<div id="loading">
</div> 

当页面加载时，当前加载div将被替换为一个空div，这将表示加载完成

另一种方法：

css

#loading
{
  display: none; 
}

html

<div id="loading">
    Loading....
</div>

js

$('#yourlink').click(function(){
    $('#loading').show(); 
});  

Answer 2

有很多方法可以做到这一点。我是这样处理的：

// Any anchor with showOverlay class will invoke the overlay function
$("a.showOverlay").click(function() {
    overlay();
});

// Normal form submits are intercepted. Overlay call also be skipped by
// making the form of class "noOverlay"
$("form").submit(function() {
    var skipOverlay = $(this).hasClass("noOverlay");
    if(!skipOverlay){
        overlay();
    }       
    return valid;
});

// This overlay function uses the blockUI plugin, other methods can also be used
function overlay(){
    $.blockUI({
        fadeIn: 500,
        css: {
            height: '150px',
            top: '35%'
        },
        message: '<div style="margin-top: 40px;"><table align="center" ><tr ><td style="padding-right: 25px;"><img src="/images/wait.gif" /></td><td style="line-height: 25px;"><h1> Just a moment...</h1></td></tr></table></div>'
    });
}