我可以在整個頁面加載之前運行JavaScript嗎？

我想在整個頁面加載之前運行一下javascript。這可能嗎？或者代碼是否開始在</html>上執行？我可以在整個頁面加載之前運行JavaScript嗎？

2010-05-27 picknick

[頁面加載前如何執行Javascript函數？]（http://stackoverflow.com/questions/885909/how-can-i-execute-javascript-function-before-page-load） – miku 2010-05-27 10:08:38

我不認爲這是重複的 - 更多的是服務器 - 客戶端通信問題。 – scunliffe 2010-05-27 10:31:45

135

不僅可以你，但你必須做出特別的努力不，如果你不想。 :-)

當瀏覽器解析HTML時遇到script標記時，它會停止解析並切換到運行腳本的Javascript解釋器。只有腳本完成後，瀏覽器纔會恢復解析頁面（因爲腳本可能會執行document.write調用來輸出解析器應該處理的標記）。這是默認行爲;有script標籤屬性可以防止這種情況（defer and async）。

所以，可以這樣考慮：

<!DOCTYPE HTML> 
<html><head><!-- yada yada yada --></head> 
<body> 
<p>Line 1</p> 
<script type='text/javascript'> 
    alert("Stop that parsing!"); 
</script> 
<p>Line two</p> 
</body> 
</html>

如果加載的頁面，你會看到「1號線」款，而該警報顯示，它完成後出現的「2號線」的段落。

與DOM進行交互有點棘手，因爲DOM是由解析器構建的，因爲它正在做它的事情，而且您的腳本可能在DOM完全準備好被操縱之前運行。一般來說，如果您只訪問文件中script標記之前的元素，那麼您很好，但爲了安全起見，最好在DOM完全構建之前暫停所有DOM交互。

但大多數情況下，您可以愉快地訪問早期的元素。試想一下：

<!DOCTYPE HTML> 
<html><head><!-- yada yada yada --></head> 
<body> 
<p id='p1'>Line 1</p> 
<script type='text/javascript'> 
    document.write("<p>p1 is null? " + (document.getElementById('p1') == null ? "yes" : "no") + "</p>"); 
    document.write("<p>p2 is null? " + (document.getElementById('p2') == null ? "yes" : "no") + "</p>"); 
</script> 
<p id='p2'>Line two</p> 
</body> 
</html>

您所看到的輸出是：

Line 1 
p1 is null? false 
p2 is null? true 
Line 2

...因爲p1存在的腳本運行時，但p2沒有。

~~我沒有得心應手的鏈接，但~~In this message，谷歌將關閉庫的開發人員說，他們沒有看到任何大的價值，「準備就緒」的風格事件原型，jQuery的，ExtJS的，道場，大多數人提供，因爲如果你把腳本放在你想要與之交互的元素之後，你很好;這與YUI's recommendation一致，您只需在關閉</html>標記之前放置腳本（因爲您必須將它們放在的某處，並且在那裏它們不會阻止您的頁面顯示）。我個人認爲，儘管我認爲它們已被過度使用，但我確實在這些事件中看到了一些價值，但我的觀點是很顯然，您可以很早就開始與事物進行交互。

來源

2010-05-27 10:16:43

很好的答案。謝謝。 – picknick 2010-05-27 10:33:09

或者您可以使用事件委託並在頁面加載之前設置您的處理程序以獲得更響應的界面。這裏有一篇很好的文章：[不要讓jQuery的$（document）.ready（）減慢你的速度]（http://encosia.com/2010/08/18/dont-let-jquerys-document-ready -slow-you-down /） – Tgr 2010-09-16 19:02:49

在瀏覽器渲染p1之前，javascript可以用來替換一個值（例如，將「Line 1」更改爲「hello world」）嗎？我的意思是說，如果我替換p1的值，我不希望屏幕閃爍。我想在用戶甚至可以看到p1（和p2以及其他元素）之前用p1替換p1的值/文本。那可能嗎？ – n00b 2013-05-02 03:46:13

-4

我想如果您在加載整個頁面之前嘗試引用BODY中的控件，您會遇到錯誤。

來源

2010-05-27 10:10:26 Raj

您可以隨時運行javascript代碼。 AFAIK它在瀏覽器到達<腳本>標記的那一刻執行，但您無法訪問尚未加載的元素。所以如果你需要訪問元素，你應該等到DOM被加載（這並不意味着整個頁面被加載，包括圖像和東西。這只是文檔的結構，因爲它更早加載，因此通常不會注意到延遲），使用DOMContentLoaded事件或諸如jQuery中的$.ready等函數。

來源

2010-05-27 10:17:44 Marian

DOMContentLoaded事件將在DOM層次結構完全構建後立即觸發，load事件將在所有圖像和子對象都完成時觸發，框架已完成加載。 – BeauCielBleu 2014-10-21 07:49:33

你是對的，我修好了。 Merci :) – Marian 2016-11-24 15:32:28

我可以在整個頁面加載之前運行JavaScript嗎？

回答

相關問題