應該採用什麼策略來儘量減少頁面初始化抖動？

當使用框架（如jQuery/UI）（如按鈕小部件）時，頁面會在頁面加載時處理佈局時抖動。我想知道什麼是最大限度地減少這種情況的最佳策略？應該採用什麼策略來儘量減少頁面初始化抖動？

我已將body標記設置爲display: none，然後$(function() { ${'body').show(); })雖然我必須想知道是否有更好的方法，但它的工作原理。

2013-04-09 Brett Ryan

不確定，但這確實看起來像使用了很多方法。我注意到很多網站在它的元素被完全加載之前不會顯示數據。 – PsyKzz 2013-04-09 14:50:39

如果你給元素提供jQuery ui在給它們初始化時給它們的類/結構，那麼抖動將不太明顯，甚至可能消失。 – 2013-04-09 14:56:52

最無縫的解決方案是爲元素提供jquery ui在初始化後給它的類/結構。

使用一個jQuery UI按鈕爲例，這裏是前：

<input type="submit" value="A submit button" />

，這裏是後：如果您使用

<input type="submit" value="A submit button" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">

後，而不是之前在你的實際的HTML中，當您使用jQuery UI對它進行初始化時，抖動（也稱爲FOUC）不會再發生在該按鈕上，因爲它已經有了這些類。

2013-04-09 15:12:59

感謝凱文，這是一個簡單按鈕的好方案，但更復雜的元素如表格（我使用jqGrid）和jQuery/UI選項卡控件呢？ – 2013-04-10 01:05:37

您是否認爲現在使用「body」的隱藏/顯示有任何內在危險？在這種情況下，儘管你得到了FOWC :) – 2013-04-10 01:08:18

好吧，隱藏/顯示身體並不能真正阻止FOUC，它只是使它更加統一。你可以在所有jQuery UI的東西（包括標籤）上使用相同的技術，但是通過網格，你可以通過隱藏網格本身直到它準備好，或者最初以「加載...」狀態顯示。 – 2013-04-10 04:49:47

回答