2017-06-01 15 views
0

我正在處理一些我繼承的代碼,它使用jQuery來生成一些包含文本和圖像的DIV塊。它會生成塊,將它們附加到頁面上,然後在塊的內部文本元素上調用outerHeight(),並使用這些高度計算伴隨圖像的大小。緩慢的Safari渲染給剛添加的元素的尺寸不一致

在除Safari之外的所有瀏覽器中,事情都能正常工作。

在Safari中,當調用outerHeight()時,有時候剛添加的元素沒有完全呈現,所以返回的度量不準確,結果頁面看起來不正確。我可以在調試器中看到這一點 - 我保存了一個不正確的outerHeight()後立即命中了斷點,在看到渲染追上一兩秒之後,再次調用outerHeight()會給出正確的值。

我試着使用setTimeout更明確地序列化這個序列,並稍後在代碼中調用outerHeight()。這使得這個問題發生得不那麼頻繁,但它有時也會發生。

我覺得這必須是一種常見模式 - 獲取剛添加元素的維度。有沒有人處理過這個?

回答

0

實驗各種延遲,我發現大部分時間,Safari會在不超過250ms左右完成附加元素的渲染。爲了解決這個問題,我使用setTimeout在延遲後運行一個函數,以檢查先前測量的高度是否與DOM中的當前高度相匹配。如果他們不這樣做,那麼我知道渲染已經改變了,我重新做了這些元素的佈局。