$(document).ready() 執行時 CSS 值可用嗎?
問題:
為什麼腳本執行於$(document).ready,在具有動態內容對齊的頁面上有時會滯後或故障?
答案:
根據 jQuery 的發行說明和文檔,$(document).ready() 可能不會等待 CSS 值完全注入到DOM。因此,建議將所有 CSS 檔案包含在
中。
說明:
-
異步CSS 載入: CSS 檔案是非同步載入的,這表示JavaScript 可以在CSS 之前執行渲染完成。
-
CSS 對JS 的依賴計算: 在某些情況下,JavaScript 計算依賴CSS 值來確定元素尺寸和位置,如果CSS 值尚不可用,這可能會導致不可用,這可能會導致不可用準確。
-
瀏覽器特定行為: 在所提出的問題中觀察到的行為可能與特定的瀏覽器行為有關,例如as:
-
Internet Explorer:有時會停止JS 執行,直到載入外部CSS,特別是當CSS 放置在頁面中的JS之上時。
-
其他瀏覽器: 即使CSS 未完全執行,也可能不會總是停止JS 執行
解決方案:
確保$(document).ready() 執行時CSS值可用:
- 始終在 中的 JavaScript 引用之前包含 CSS 檔案。
- 如果可能,請考慮在載入所有 CSS 和內容後將腳本移到頁面底部。
附加說明:
- 大多數情況下,將CSS 放在JS 之上將解決與CSS 對JS 依賴相關的效能問題
- 但是,與非同步資源載入和腳本執行相關的複雜的瀏覽器特定行為仍然可能發生。
以上是$(document).ready() 是否始終可以存取最終的 CSS 值?的詳細內容。更多資訊請關注PHP中文網其他相關文章!