加载所有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

加载所有JS文件时的浏览器事件

相关问题