Question

我的AJAX应用程序基本上是一个index.html加上一堆.js模块。我的setup函数将js处理程序代码连接到适当的DOM元素。我怀疑我需要使用window.onload（）而不是jquery的$（document）.ready（），因为所有的.js文件都需要在连接时可用（即下载）。

我的理解是只有DOM树已准备好在$（document）.ready（），但不能保证已加载.js文件。这是对的吗？

PS。我不需要多个onload处理程序;一个window.onload（）对我来说很好。

Answer 1

在这种情况下，你肯定会有误解。在body标记关闭之前包含脚本标记的最佳实践的全部原因是因为脚本加载阻塞了加载。除非另有特别编码（即;谷歌分析），否则JavaScript文件将同步加载。

也就是说，如果脚本文件之间存在依赖关系，那么加载文件的顺序可能很重要。

Answer 2

不，只要同步加载脚本标记，您就可以安全地使用$(document).ready()（在大多数情况下，这意味着“正常”）。浏览器在继续之前等待加载<script>。因此，$(document).ready()包含来源中的所有<script>代码。

如果脚本标记包含async或defer属性，则有两个例外情况。先前的意思是兼容的浏览器可以继续呈现页面，后者表示脚本在页面完成时执行。

Answer 3

我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中）：

Page已开始加载。现在继续页面加载并尝试   加载其他脚本文件（暂停10秒后）。

jssleep.php文件之前的内联脚本已运行。

jssleep.php脚本文件已加载并运行以下＆lt;？php sleep（10）;   ？＆GT;

这是一个在jssleep.php脚本文件之后运行的内联脚本   已加载/运行。

$（document）.ready（）已经运行。

$（window）.load（）已经运行。

Answer 4

这是正确的。但是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);

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

4 个答案: