当window.onload被解雇时

对于何时触发window.onload事件,我有点困惑。 例如:我有一个页面,有很多外部js文件,甚至按需加载脚本(动态创建标签)。 所有这些代码都在页面中(即,它不会在点击或不点击时被触发,它应该在加载时执行)。 现在让我们说,我有最后一个按需javascript的window.onload = somefunction()。 是否有可能在实际加载所有脚本之前,window.onload会触发?


window.onload (aka body.onload )在主HTML,所有CSS,所有图像和所有其他资源已被加载和渲染后被触发。 所以如果你的图片失速,那可能需要一些时间。

如果你只需要HTML(DOM),你可以使用jQuery的$(document).ready() - 当HTML解析完成后,浏览器完成加载所有外部资源(图片和样式表之后) HTML中的脚本元素)。

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

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


当所有资源(文档,对象,图像,css等)完成渲染时,将调用window.onload()。

错误的问题。 是的,window.onload事件完全可能在动态附加脚本完成下载之前触发。 使用DOM(document.createElement())添加的脚本异步下载并且不受通常规则的约束,即window.onload()等待所有资源先完成下载。

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

在IE和Chrome中测试。


Re:评论,如果你想检查onload事件是否已经触发,你可以在onload处理程序中设置一个全局变量的值:

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
    }        
}        
链接地址: http://www.djcxy.com/p/83323.html

上一篇: when is window.onload fired

下一篇: Is $(document).ready() also CSS ready?