顯示帶有非ajax頁面的加載對話框

Question

我目前的情況：

1. 在某些HTML頁面中有一個鏈接。

2. 用戶單擊該鏈接時，正向Web服務器（通常是Java Servlet）發送一個NORMAL （與Ajax）HTTP請求。

3. 之后，瀏覽器當然會帶走服務器中的內容並開始渲染。 （實際上，這是同一頁，其內容已修改-不要要求我使用Ajax進行操作，因為這是要求）

在完成第3步之前（在加載頁面的同時），我需要向用戶顯示一些框架，例如loading ....

Answer 1

好吧，單擊鏈接時，只需在頁面上的某個位置用“正在加載...”填充div。 這是一些粗糙的代碼

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