歡迎加載...頁面與Jquery

Question

如何實現一個歡迎屏幕5秒鐘，提供信息，如加載應用程序... +一些應用程序的信息...而主頁加載在後臺。

Answer 1

我認爲這是可以接受的一個「載入中...」在某些情況下頁面 - 例如，一個用戶在業務應用程序日誌後（想想TurboTax在線...它說'建立安全連接'，這可能不完全正確，但加載界面的東西）。每當匿名用戶訪問您的網站時顯示頁面可能不是最好的主意。

看看jQuery BlockUI。它很靈活，可以做你正在談論的事情。

Answer 2

除非您真的在後臺使用這段時間來實際進行某種預加載，否則我會強烈建議不要從最終用戶的角度出發。我個人會覺得很煩人，當進入一個網站時，在實際獲得我想要的內容之前，我不得不坐下來進行一些介紹。

這就是爲什麼我傾向於討厭在Flash中設計的網站或那些僅僅包含Flash splash頁面的網站。

編輯：我並不認爲主要的網頁的加載應該有資格獲得太多的「預加載」的規模，除非它是資源密集型。再次，這些只是我的看法。

編輯＃2：也可以爭辯說，您的網站的訪問者將根據短短五秒的時間決定是停留還是停留。請記住，那些使用互聯網的人往往注意到果蠅的注意力，並且在他們真正到達內容之前將它們置於持有模式中是失去這些用戶的好方法。

Answer 3

當頁面加載時（理論上作爲絕對定位的疊加層），您將顯示歡迎消息。然後，您可以使用jQuery揭開序幕定時器：

$(document).ready(function(){ 
    setTimeout(function(){ 
     $('div#overlay').fadeOut(); 
    }, 5000); 
}); 

Answer 4

雖然我同意@TheTXI，要做到這一點是使用CSS有「載入中...」屏幕默認爲可見的最好方式，然後一旦一切都使用jQuery加載（而不是等待一段固定的時間），就隱藏它。

見jQuery.load() ...例如：

$(document).ready(function(){ 
    $("body img:last").load($("#welcome-screen").fadeOut()); 
    }); 

Answer 5

只爲任何未來誰發現這一點，我找到了一個更優雅的解決方案。

http://www.jnorton.co.uk/blog/jquery-check-if-all-content-has-been-loaded

這是我如何使用它：

$(document).ready(function(){ 
    $(window).load(function() {$("#welcome").fadeOut('fast'); }) 
});