jQuery對頁面加載的影響

Question

我有一個頁面在頁面加載中做了一些耗時的工作（實際上就是它所做的全部）。 我想向用戶展示一個不錯的消息，然后在實際結果完成后將其替換。

我嘗試做的所有事情都會使UI在漫長的過程結束后呈現，這無濟於事。 我嘗試使用UpdatePanel使頁面呈現，然后從客戶端觸發更新，但是它也不起作用。

有人可以告訴我如何執行此操作嗎？

謝謝

Answer 1

我建議您執行以下操作：

1. 創建一個新頁面，該頁面僅顯示加載時要顯示的內容。 正在加載圖形或其他方式。
2. 通過AJAX調用您的當前頁面，讓它返回success或failure或您想要返回到頁面1的任何內容。
3. 在ajax調用返回之后，您可以用成功的圖形替換正在加載的圖標或html。

HTML頁面1： <div id="content"><img src="images/loading.png" alt="loading" /></div>

jQuery的：

$.ajax({
    type: "GET",
    timeout: 30000,  // set accordingly
    url: "/some/url", // this is the page that will do all the work
    beforeSend: function() {
      // do some stuff
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
      alert("An error has occurred making the request: " + errorThrown); // if there was an issue
    }, 
    success: function() {
    $('#content').html('Success!!'); // change icon or what you need to do.
    }
    });

我無法獲得用於正確設置代碼格式的UI。 jQuery Ajax參考： http ： //api.jquery.com/jQuery.ajax/

Answer 2

您可以使用jQuery BlockUI插件 -在就緒的處理程序中 ，進行阻止，處理然后取消阻止。

如果有大量數據流到客戶端，則就緒處理程序啟動並阻塞頁面之前，可能會有一段不舒服的時間，因此另一種策略是使<div>覆蓋頁面（請使用“等待，正在加載其中的消息），您將其隱藏在就緒處理程序的末尾。

Answer 3

如果使用的是ASP.NET WebForms，則可以在加載某些內容時使用UpdatePanel和UpdateProgress來顯示圖像。 只需將updateprogress控件指向updatepanel控件即可。 UpdateProgress將包含加載圖像和updatepanel您的主要內容和控件。 但是，UpdateProgress和UpdatePanel是Microsoft編寫的丑陋工具，我強烈建議使用jQuery及其真正的AJAX調用（盡管這樣做會涉及更多工作）