2010-11-02 41 views
1

我以前在使用jQuery的$(document).ready()時,在Pro網站管理員中詢問了有關HTML的putting Javascript at the bottom的問題。答案是JS必須等待整個DOM加載,所以JS代碼在哪裏都沒有區別。爲什麼我會在頁面底部使用JS的「un-jqueried」內容?

但是,實際上似乎並非如此。我使用的是表格排序插件,當用底部的jQuery加載頁面時,我首先看到未排序的表格。然後,JS開始,對錶格進行排序並向標題添加箭頭(也會更改表格寬度)。它類似於過去常常發生在CSS中的「FOUC」(Unstyled Content的Flash)。

使用頁面頂部的jQuery,頁面加載排序的表,並且沒有跳躍。

爲什麼會發生這種情況?無論如何,唯一的解決方案是將JS保持在頂端。

+1

你包裝你的代碼在'$(文件).ready'當你把它在底部,因爲你不需要? – 2010-11-02 11:01:13

回答

1

發生這種情況的原因是,一旦所有元素都放置在DOM中,文檔就處於「就緒」狀態,但不一定在所有元素都完全加載之後。當庫存在<head>標籤中時,它在被插入到DOM之前被加載,但是如果它在<body>標籤中,它在文檔準備就緒時仍在加載。

因此,即使文檔已經準備好,它仍然需要完全加載庫並執行所需的代碼,這似乎比在head標籤中花費的時間要長。事實上:它發生在任何一個方面,但這種方式更明顯。

爲防止出現這種差異:樣式javascript的免費版本頁面與javascript版本相同(或儘可能接近)。

view ready() reference

+0

謝謝,我設法解決表格調整大小問題,方法是將類添加到頭部,然後通過Javascript添加。 – DisgruntledGoat 2010-12-31 12:31:01

0

另一個選項是保持表格隱藏,然後使其顯示爲$(document).Ready()中的最後一條語句。

JavaScript通常保留在頁面底部,以便在JS處理開始之前讓頁面顯示基本樣式和內容。

如果表格的內容需要在JS運行之前正確顯示,唯一真正的選擇是使用適當的排序+樣式爲其提供服務,而不是依賴JS爲您完成。無論如何,我會建議你這樣做。

相關問題