Question

我目前的情况是：

在某个HTML页面中有一个链接。
当用户单击该链接时，会向Web服务器（通常是Java Servlet）发送NORMAL（与Ajax）HTTP请求
之后，浏览器当然会从服务器中提取内容并开始渲染。（实际上它与修改内容的页面相同 - 请不要让我在ajax中执行此操作，因为这是要求）

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

Answer 1

好吧，只需点击链接，就可以在页面的某处填充“正在加载...”。这是一些粗略的代码

$('#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

嗯，有几种非Ajax方法可以做到这一点。最简单的我想是用你的加载栏获得一个giv动画图像，你将它保存在初始页面的隐藏div中：

<div style="display:hidden;"><img src="/img/loading.gif"></div>

然后将一些javascript添加到提交页面的链接/按钮，例如点击它时，它会取消隐藏带图像的div。

Answer 3

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

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

显示包含非ajax页面的加载对话框

3 个答案: