顯示與非AJAX頁面

Question

裝載對話框我已經在目前的情況：

1. 有一些HTML頁面的鏈接。

2. 當用戶點擊該鏈接，一個NORMAL（VS阿賈克斯）HTTP請求被髮送到Web服務器（通常是Java Servlet的）

3. 之後，當然瀏覽器將帶來從內容服務器並開始渲染它。 （實際上它與修改的內容相同的頁面 - 不要問我做，在阿賈克斯，原因是需求）

第3步之前正在做（在加載的頁面），我需要以向用戶顯示一些框架，如loading ....

Answer 1

那麼，只需在點擊鏈接時在頁面的某個位置填充「加載...」即可。這裏有一些粗糙的代碼

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


<div id="loading"> 
</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>' 
    }); 
}