在dom加載之後但在用戶可以看到dom之前發生的就緒事件

Question

使用窗口或文檔就緒函數遇到的問題是，在某些瀏覽器中，用戶可以看到發生的DOM操作該頁面正在加載。例如，如果我要刪除窗口內的元素，用戶可以先看到圖像加載，然後將其刪除。

我知道我可以隱藏CSS中的所有內容，然後在執行代碼後顯示它，但這不是我正在尋找的解決方案。它並不總是工作。首先，因爲JS是異步的，所以沒有辦法知道在所有其他dom操作完成後你的show函數將會觸發。

基本上我想要的是一個像文檔/窗口準備就緒的函數，除了它在DOM可見之前發生之外。在dom加載之後，但在它可見之前 - 那是我想要執行操作的時候。

Answer 1

沒有任何事件可以滿足您的需求。 See section 18.2.3。

這被稱爲Flash of Unstyled Content。 Google搜索會向您顯示更多技巧。你說得對。 jQuery最常見的方法是簡單地將style="display: none"添加到您的身體標記。然後，在ready事件結束時致電$(body).show()。

@SarahBourt在評論中提供了有關高度計算的好方法。如果您可以支持現代瀏覽器，並且出於某種原因需要保持高度，則可能需要使用style="opacity: 0"和style="opacity: 1"而不是display來隱藏/顯示您的內容。

如果您需要確保所有操作都先完成。然後，您需要手動跟蹤所有操作，並且只有在確定完成後纔會觸發show。

Answer 2

「dom被加載後，但在它可見之前 - 這是我想要 執行我的操作。」

這是不可能的，因爲那段時間不存在。

瀏覽器在DOM完全加載之前就開始顯示DOM，所以沒有時間加載DOM並且它不可見。

可以得到的最接近的結果是將腳本標記放置在要使用的元素之後，但即使此時用戶也可能會看到該元素一會兒。

元素在被解析後可以立即顯示，並且沒有可用於在元素解析和元素變爲可見之間進入的事件。在頁面加載時使元素可靠隱藏的唯一方法是使用CSS在它存在之前使其不可見。