加載所有JS文件時的瀏覽器事件

我的AJAX應用程序基本上是一個index.html加上一堆.js模塊。我的設置函數將js處理程序代碼連接到適當的DOM元素。我懷疑我需要使用window.onload（）而不是jquery的$（document）.ready（），因爲所有的.js文件都需要在連接時可用（即下載）。加載所有JS文件時的瀏覽器事件

我的理解是隻有DOM樹已經準備好在$（document）.ready（），但是不能保證.js文件已經被加載。那是對的嗎？

PS。我不需要多個onload處理程序;一個window.onload（）對我來說很好。

來源

2012-02-11 Benito Ciaro

這可能有助於：[Javascript的加載方式如何工作 - DOMContentLoaded和OnLoad]（http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/）。 – 2012-02-11 04:34:22

難道你不能只加載所有支持的.js文件（首先將他們的

這是正確的。但window.onload也需要下載CSS和圖像，所以可能有點矯枉過正。

你可以做的是這樣的：

var scriptsToLoad = 0; 
// for each script: 
s = document.createElement('script'); 
s.type = "text/javascript"; 
s.src = "path/to/file.js"; 
scriptsToLoad += 1; 
s.onload = function() {scriptsToLoad -= 1;}; 
// after all scripts are added in the code: 
var timer = setInterval(function() { 
    if(scriptsToLoad == 0) { 
     clearInterval(timer); 
     // do stuff here 
    } 
},25);

來源

2012-02-11 04:29:55

在這種情況下，你肯定有誤解。在body標籤關閉之前包含腳本標籤被認爲是最佳實踐的全部原因是腳本加載阻塞了加載。除非特別編碼（即：google analytics），否則JavaScript文件將同步加載。

也就是說，如果腳本文件之間存在依賴關係，則加載文件的順序可能很重要。

來源

2012-02-11 04:37:31

我setup two文件作爲測試：

syncscript.html

<html> 
<head> 
<title></title> 
<style type="text/css"> 
</style> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(window).load(function(){ 
    $(document.body).append('<p>window.load has run.'); 
}); 
$(document).ready(function(){ 
    $(document.body).append('<p>document.ready has run.'); 
}); 
</script> 
</head> 
<body> 
<p>Page has loaded. Now continuing page load and attempting to load additional script file (after 10 second pause).</p> 
<script type="text/javascript"> 
var p = document.createElement('p'); 
p.innerHTML = '<p>Inline script preceding jssleep.php file has run.</p>'; 
document.body.appendChild(p); 
</script> 
<script type="text/javascript" src="http://jfcoder.com/test/jssleep.php"></script> 
<script type="text/javascript"> 
var p = document.createElement('p'); 
p.innerHTML = '<p>This is an inline script that runs after the jssleep.php script file has loaded/run.</p>'; 
document.body.appendChild(p); 
</script> 
</body> 
</html>

jssleep.php

<?php 

header("content-type: text/javascript"); 

sleep(10); 

?> 
var p = document.createElement('p'); 
p.innerHTML = '<p>jssleep.php script file has loaded and run following &lt;?php sleep(10); ?>.</p>'; 
document.body.appendChild(p);

此輸出（在Firefox）：

頁面已經開始加載。現在繼續頁面加載並嘗試加載其他腳本文件（暫停10秒後）。

jssleep.php文件之前的內聯腳本已運行。

jssleep.php腳本文件已經加載並運行以下文件：<？php sleep（10）; ？>。

這是在jssleep.php腳本文件加載/運行後運行的內聯腳本。

$（document）.ready（）has run。

$（window）.load（）已經運行。

來源

2012-02-11 04:58:13

相關問題