在DOM准備好但在呈現UI之前，如何使用jquery做些什么？

Question

我有一個jQuery腳本，它可以更改<img>和其他一些頁面元素的src屬性。

我的腳本使用$()連接到文檔就緒回調。 當我刷新頁面時，我看到原始內容半秒鍾。 我想避免這種情況。

有沒有辦法為我的腳本來執行后 DOM是准備好，但它之前被渲染？

Answer 1

不是真的，但你可以很好地假裝它。 嘗試將圖像設置為display ='none'。 設置src屬性后，可以使用$（'＃myImage'）。show（）顯示圖像。

Answer 2

我不認為這是可能的。 目前，瀏覽器在DOM構建完成之前就開始渲染UI。

Answer 3

渲染后我會立即隱藏身體......

<body>
<script type="text/javascript">document.body.style.display = 'none';</script>

然后在jQuery代碼執行后顯示它...

 $(document).ready(function() {
   // Whatever you gotta do here
   document.body.style.display = '';
 });

這將確保您的網站在禁用Javascript時正常運行。

Answer 4

使用CSS屬性隱藏您不想顯示的內容：

display: none;

或者如果您不想弄亂頁面的布局：

visibility: hidden;

由於網頁的性能取決於UI的呈現速度，因此很難延遲呈現UI的整個過程。 標簽通常會阻止UI的呈現，因為Javascript解釋器會通過您的代碼，但這種情況可能發生得如此之快，以至於您無法獲得所需的功能。

Answer 5

順便說一句，您通常可以在關閉標簽后立即訪問該元素。 但是，在較大的復合元素（如div）上，它可能已經開始渲染。

<img src="nothin.jpg" id="dynamicImage" />
<script type="text/javascript">$('#dynamicImage').hide();</script>