隱藏在頁面開始加載大量的JQuery

的我建立一個網站時發生的閃光燈和其他髒的效果，我可以看到的是，更多的代碼，我在JQuery的正文中添加，隱藏在頁面開始加載大量的JQuery

$(document).ready(function($){ 
    ... 
});

的我在加載網站所需的第一秒內產生了更多惱人的效果。我可以看到所有的元素都沒有風格，然後移動/變形，直到我在第二秒後達到研究的外觀。

現在只需要一秒鐘，但我無法想象要開始生產這種顯示錯誤。

是否有人曾經處理過這種效應？你會推薦什麼？

非常感謝球員;）

更新：我不是通過JQuery的做任何醜陋的CSS。我只是碰巧使用了幾個不同的插件。最討厭的是我正在使用的Jqx菜單。在jquery完成轉換之前，我可以看到文本沒有顯示。

來源

2011-12-15 Jerome

您可以隱藏頁面的內容，然後再次顯示在頁面加載完成後。

將這個剛剛開放body標籤後：

<script type="text/javascript"> 
    $('body').hide(); 
    $(window).load(function() { $('body').show(); }); 
</script>

不是說這是做到這一點的最好辦法，但應防止風格閃爍。

來源

2011-12-15 14:54:53

這本來不錯。它完美地工作，但我的菜單後來看起來不太一樣。不知道可能來自哪裏。 – Jerome 2011-12-15 18:14:08

使用CSS而不是jQuery來應用您的初始樣式！

來源

2011-12-15 14:46:02 karim79

Hy，
你可以試着通過Yahoo SmushIt來擦掉你的照片。
這將刪除圖像中的每一個不必要的位。
秒你可以壓縮你的.js和.css文件，通過http://jscompress.com/和http://www.lotterypost.com/css-compress.aspx增加更多的速度。

如果您使用jQuery來改變立即使用CSS的所有變化，請使用CSS！

來源

2011-12-15 14:46:47

如果您使用$(document).ready(...);來分配類，禁用元素，移動它們等，那麼您可能會錯誤地做到這一點。儘可能在HTML中分配類/樣式，而不是在頁面使用Javascript完成加載後進行。而不是做這樣的事情：

<input type="text" id="exampleTextInput" name="example"> 

<script> 
$(document).ready(function() { 
    $('#exampleTextInput').addClass('exampleClass'); 
}); 
</script>

做，而不是執行以下操作：

<input type="text" id="exampleTextInput" name="example" class="exampleClass">

來源

2011-12-15 14:52:14

隱藏在頁面開始加載大量的JQuery

回答

相關問題