如何檢測時，瀏覽器已經完成更新視圖（重新佈局，應用任何改變CSS）

我的代碼，我想運行一個看起來是這樣的僞代碼：如何檢測時，瀏覽器已經完成更新視圖（重新佈局，應用任何改變CSS）

一些應用CSS樣式一些元素
做一些其他的動作

的問題是，我需要做的不是「其他行動」，直到我敢肯定後，瀏覽器實際上呈現的變化d CSS並且對用戶可見。

儘管javascript是單線程的，並且如果'其他操作'阻止了javascript進一步執行，我認爲瀏覽器仍然可以用步驟1中設置的新CSS值更新視圖，即使javascript本身被阻止 - 但這似乎沒有發生（CSS更改直到第2步之後才顯示 - 在這種情況下，遠程服務調用完成）。

來源

2011-07-21 jinglesthula

添加到Grezzo的評論，您可以使用JS超時爲0，以確保前一行代碼已完成執行。這是可行的，因爲它將setTimeout閉包內的任何內容放在要運行的內部代碼隊列的最後。例如

// Update CSS 
$('#mydiv').css({'position' : 'relative', 'top' : 0}); 
setTimeout(function() { 
    funcToRunAfterUIUpdate() 
}, 0);

我StackOverflow上過的n00b發佈一個鏈接，我想，否則你可以閱讀「掌握refresh（）方法」一節在這裏：http://cubiq.org/iscroll-4

「我們在這裏放置在刷新調用進入一個零超時，這樣我們給了瀏覽器自己刷新的時間，並且正確地採用了新的元素維度。還有其他方法可以確保瀏覽器實際更新DOM，但到目前爲止，零超時已被證明是大多數固體。」

來源

2011-07-21 19:29:46 elrasguno

我還記得在intertubes上看到關於嘗試讀取虛擬div的寬度屬性的東西，並強制瀏覽器渲染/繪製，因爲它必須這樣做才能正確返回寬度值。如果任何人都可以驗證併發布，我會改變並給他們答案，因爲它看起來像一個簡單的方法，保持代碼的流程，並不依賴於時間，這可能是不同的硬件/情況/等。（我知道這是一個黑客，但我們在這裏談論瀏覽器:) – jinglesthula

如果您將Javascript代碼放入函數之外的頁面頭部分，那麼該Javascript將在網頁內容加載之前運行。如果您將JavaScript代碼放置在網頁主體部分的函數之外，那麼該Javascript將在頁面加載時（頁面加載到達代碼時）運行。在這兩種情況下，整個網頁都不會被加載 - 特別是如果頁面包含大量圖像。

在這裏你可以得到更多的信息aboun頁面事件。

http://javascript.about.com/library/bltut31.htm

來源

2011-07-21 18:33:18 JAiro

有兩個單獨的JavaScript文件.... 要更改CSS並在頁面的只是身體標記之前底部的另一種添加的CSS之一，這將確保然後在加載頁面後的稍後執行js

來源

2011-07-21 18:35:35 Anush

您可以使用setTimeOut()來調用遠程服務調用函數，從而給瀏覽器提供一個非常小的時間間隙，以便在執行支持渲染的函數之前進行渲染？

你有沒有例子？也許jsFiddle？

來源

2011-07-21 18:39:14 Grezzo