如何在新頁面啓動時添加加載欄，直到所有數據完全加載？

如何添加一個加載欄，同時按下「href」指向其他頁面的鏈接按鈕？如何在新頁面啓動時添加加載欄，直到所有數據完全加載？

由於後端服務需要處理一些請求，在顯示新頁面之前可能需要大約10秒。（這種情況是當我按下鏈接按鈕，頁面看起來像停止響應大約10秒...）

我需要在按下鏈接按鈕時觸發加載欄動作。

剛剛找到一種方法使用ajaxstart，ajaxstop（ref：http://jsfiddle.net/jonathansampson/VpDUG/170/），它適合我的情況嗎？

2012-10-02 SH JONG

是的，AJAX適合您的情況。我會解釋一下。

用戶點擊鏈接後，使用JavaScript阻止頁面加載。在jQuery代碼這將看起來像以下。

$('a').click(function(e){ 
    e.preventDefault(); 

    // save the destination of the link for the ajax request 
    var destination = $(this).attr('href'); 
});

顯示一個加載條。
```
$('#loading').show(); 
```
然後發送一個AJAX請求到服務器。
服務器收到請求，計算結果並將其發送回客戶端。
當客戶端的JavaScript獲得服務器的響應時，請替換頁面的內容。 jQuery允許你定義一個回調函數，它在響應到達時執行。
如果隱藏加載條。
```
$('#loading').hide(); 
```

我建議使用jQuery做簡化。它會爲你節省很多時間。

來源

2012-10-02 09:58:40 danijar

嗨Danijar，對於遲到的回覆抱歉。我想說謝謝。由於某些原因，我沒有嘗試過。但我會，而且我認爲它也有助於很多人。 –

如果您還沒有使用AJAX首先加載頁面，但只是一個簡單的<a href="other-page">link</a>（並從您的問題我假設是這種情況 - 如果我錯了，然後看the answer by sharethis誰解釋如何做到這一點如果你實際上使用AJAX加載其他頁面），那麼綁定處理程序到AJAX事件將不會做你所需要的，因爲不會有AJAX事件。

我建議寫這樣的事情：

function loading() { 
    $('body').addClass('loading'); 
    setTimeout(function() { 
     $('body').removeClass('loading'); 
    }, 20000); 
}

和綁定功能，單擊處理程序被加載緩慢的聯繫，但沒有阻止默認的鏈接行爲（即。其實下面的鏈接）這樣的鏈接與class="slow"：

$('a.slow').click(loading);

或每一個環節：

$('a').click(loading);

的setTimeout有這麼的情況下時，服務器不會因爲某些原因，然後作出迴應用戶將永遠不會使頁面不可用。

我仍然建議不要在加載微調器顯示時使頁面不可用，以便用戶可以免費使用其他內容，而不必等待服務器響應，但這取決於您。請參閱THIS DEMO（您在CSS中進行了一些更改）以瞭解我的意思。

來源

2012-10-02 10:40:16 rsp

如何在新頁面啓動時添加加載欄，直到所有數據完全加載？

回答

相關問題