Javascript window.onload 什么时候触发？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3520780/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When is window.onload fired?
提问by Marius S.
I'm a bit confused as to when the window.onload event is fired. For example: i have a page that has lots of external js files and even an on-demand loading of the script (dynamically creating a tag). All of this code is in the page (ie. it does not get fired on click or smth, it should execute while loading). Now let's say that i have window.onload = somefunction() in the last on-demand javascript. Is it possible that window.onload will fire before all the scripts actually get loaded?
我对什么时候触发 window.onload 事件有点困惑。例如：我有一个页面，其中包含大量外部 js 文件，甚至按需加载脚本（动态创建标签）。所有这些代码都在页面中（即它不会在点击或 smth 时被触发，它应该在加载时执行）。现在假设我在最后一个按需 javascript 中有 window.onload = somefunction() 。window.onload 是否有可能在所有脚本实际加载之前触发？
回答by Aaron Digulla
window.onload(a.k.a body.onload) gets fired after the main HTML, all CSS, all images and all other resources have been loaded and rendered. So if your images stall, that can take some time.
window.onload（又名body.onload）在主 HTML、所有 CSS、所有图像和所有其他资源都已加载和呈现后被触发。因此，如果您的图像停顿，则可能需要一些时间。
If you just need the HTML (DOM), you can use jQuery's $(document).ready()- it will fire when the HTML has been parsed but before the browser has finished loading all external resources (images and style sheets that come after your script element in the HTML).
如果您只需要 HTML (DOM)，您可以使用 jQuery $(document).ready()- 它会在 HTML 被解析但在浏览器完成加载所有外部资源（HTML 中脚本元素之后的图像和样式表）时触发。
Scripts embedded in the page get executed when the browser parses the </script>of each. So to execute a script before any other script, add a <script>tag in the header just after <head>.
当浏览器解析</script>每个脚本时，页面中嵌入的脚本就会被执行。因此，要在任何其他脚本之前执行脚本，请<script>在<head>.
This means you can "emulate" window.onloadby adding a <script>tag as the last element of the <body>.
这意味着您可以window.onload通过添加<script>标签作为<body>.
回答by Andy E
No. window.onload()is invoked when all resources (the document, objects, images, css, etc) have finished rendering.
否。 当所有资源（文档、对象、图像、CSS 等）完成渲染时调用window.onload()。
Misread the question. Yes, it is entirely possible that the window.onloadevent will fire before a dynamically appended script has finished downloading. Scripts added using the DOM (document.createElement()) download asynchronously and aren't subject to the usual rule that window.onload()waits for all resources to finish downloading first.
误读了这个问题。是的，window.onload事件完全有可能在动态附加的脚本完成下载之前触发。使用 DOM ( document.createElement())添加的脚本异步下载并且不受window.onload()等待所有资源首先完成下载的通常规则的约束。
I set up a test suite for you, http://jsfiddle.net/ywSMW/. This script adds the jQuery script to the DOM dynamically and writes the value of $to the console during the onloadhandler. It then writes the value again a second later. Even with the script being cached, the first write to the console returns undefined, meaning the onload even has fired before the jQuery script has been downloaded and parsed.
我为你设置了一个测试套件，http://jsfiddle.net/ywSMW/。此脚本动态地将 jQuery 脚本添加到 DOM 并$在onload处理程序期间将 的值写入控制台。然后它在一秒钟后再次写入该值。即使脚本被缓存，第一次写入控制台也会返回undefined，这意味着 onload 甚至在 jQuery 脚本被下载和解析之前就被触发了。
Tested in IE and Chrome.
在 IE 和 Chrome 中测试。
回复：评论，如果你想检查 onloadonload事件已经触发，你可以在里面设置一个全局变量的值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
}
}
