文檔未准備好時顯示加載

Question

我想向用戶顯示他想要訪問的文檔正在加載但尚未准備好。

我想在滿載時顯示網頁。

我用

$(document).ready(function(){});

准備好文件。 我應該怎么辦？

Answer 1

要做的第一件事就是問為什么頁面加載速度太慢而你覺得你需要一個加載橫幅，並盡一切可能解決這個問題。

如果由於相關網頁的性質而無法解決問題，那么下一個考慮因素是確保只有啟用了JavaScript的用戶才會顯示“正在加載”橫幅（因為我們稍后會使用JavaScript將其刪除，所以將它放在那里然后如果它們沒有JavaScript則不刪除它會有點意思。 這可能是document.write語句中為數不多的有效剩余用法之一（並且只有在您不使用XHTML時，因為它在XHTML中無效）：

<body>
<script>
document.write("<p id='loading'>Loading...</p>");
</script>

...你用CSS設計的風格，大概是：

#loading {
    position:         absolute;
    left:             0px;
    top:              0px;
    background-color: #ddd;
    /* ... */
}

然后在ready處理程序中刪除它：

$('#loading').remove();

如果您正在使用XHTML（或者您根本不想在原則上使用document.write ），您可以在沒有document.write情況下執行類似操作，類似於：

<body>
<script>
    (function() {
        var p = document.createElement('p');
        p.id = 'loading';
        p.innerHTML = "Loading...";
        document.body.appendChild(p);
    })();
</script>

實例（在Windows上的IE6 / 7/8上測試;在Windows上測試Safari;在Linux和Windows上測試Chrome，Opera和Firefox。）

Answer 2

在代碼的開頭用加載文本/動畫寫一些元素，然后在文檔就緒時用javascript刪除或隱藏該元素。 可能需要一些輸出緩沖來使加載消息立即顯示。

$(function() {
    $("#loading_element").hide();
});

文檔未准備好時顯示加載

問題描述

2 個解決方案

解決方案1
8 已采納 2011-02-22 15:57:36

解決方案2
2 2011-02-22 15:55:53

文檔未准備好時顯示加載

問題描述

2 個解決方案

解決方案1 8 已采納 2011-02-22 15:57:36

解決方案2 2 2011-02-22 15:55:53

解決方案1
8 已采納 2011-02-22 15:57:36

解決方案2
2 2011-02-22 15:55:53