Question

关于window.onload事件何时被触发，我有点困惑。例如：我有一个页面，其中包含许多外部js文件，甚至是按需加载脚本（动态创建标记）。所有这些代码都在页面中（即，它不会在click或smth上被触发，它应该在加载时执行）。现在让我们说我在最后一个按需javascript中有window.onload = somefunction（）。是否有可能在实际加载所有脚本之前触发window.onload？

Answer 1

window.onload（a.k.a body.onload）在主HTML，所有CSS，所有图像和所有其他资源都已加载和渲染后被触发。因此，如果您的图像停滞，可能需要一些时间。

如果您只需要HTML（DOM），则可以使用jQuery的$(document).ready() - 它将在解析HTML时触发，但在浏览器加载完所有外部资源（图像和style sheets that come after your script element in the HTML之前））。

当浏览器解析每个</script>时，页面中嵌入的脚本会被执行。因此，要在任何其他脚本之前执行脚本，请在<script>之后的标题中添加<head>标记。

这意味着您可以通过添加window.onload标记作为<script>的最后一个元素来“模仿”<body>。

Answer 2

<击>否。当所有资源（文档，对象，图像，css等）完成渲染时，将调用 window.onload（）。

误读了这个问题。是的，完全有可能在动态附加脚本下载完成之前触发 window.onload 事件。使用DOM（ document.createElement（））异步下载添加的脚本，并且不受 window.onload（）等待所有资源完成下载的通常规则的约束第一

我为您设置了一个测试套件，http://jsfiddle.net/ywSMW/。此脚本动态地将jQuery脚本添加到DOM，并在 onload 处理程序期间将$的值写入控制台。然后它会在一秒钟之后再次写入该值。即使脚本被缓存，第一次写入控制台也会返回 undefined ，这意味着在下载和解析jQuery脚本之前，onload甚至已经被触发。

在IE和Chrome中测试过

<小时/> Re：注释，如果要检查 onload 事件是否已经触发，可以在 onload 处理程序中设置全局变量的值：

< / p>

var windowHasLoaded = false;

window.onload = function () {
    windowHasLoaded = true;
}

function doSomethingWhenWindowHasLoaded() {
    if (!windowHasLoaded) {
        // onload event hasn't fired yet, wait 100ms and check again 
        window.setTimeout(doSomethingWhenWindowHasLoaded, 100);
    } else {
        // onload event has already fired, so we can continue
    }        
}

window.onload何时被触发？

2 个答案: