在做了一些搜索后,我发现事实并非如此.从这个页面：https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html,似乎在onload事件被触发时没有加载图像.但是从window.onload vs <body onload=””/>开始,在我看来,当onload被触发时,图像被加载了.从这个链接http://forums.mozillazine.org/viewtopic.php?f=25&t=413504&start=0&st=0&sk=t&sd=a对我来说更加困惑.
所以我的第一部分问题是：当window.onload被触发时,是否所有资源都被加载了？
问题的另一个密切相关的部分是：在window.onload被触发之前,资源加载顺序是什么？我知道内部资源,如内部javascript或css,加载顺序是从页面顶部到底部(除非在IE中,使用延迟脚本,如此处所示Getting notified when the page DOM has loaded (but before window.onload)).
但是外部javascript和css资源呢？例如,如果我像这样写我的页面：
<external stylesheet...> <external javascript #1...> <external javascript #2...> <script> ..... window.onload=.... </script>
假设“外部javascript#2”中的函数调用“外部javascript#1”中的函数,我能确定它总是有效吗？另外如果window.onload调用“外部javascript#1”中的函数也可以按预期工作？
您可以说资源加载顺序以及何时触发window.onload事件取决于浏览器实现,如What is the event precedence in JavaScript?所述.但我仍然想知道公众中是否有规范或惯例.那么请你转介我的资源或告诉我事实以清除我的困惑？
解决方法
它归结为：浏览器按照文档中遇到的顺序加载脚本,并在下载每个脚本时停止所有其他加载.其他资源(css / images)是异步加载的,您无法确定它们何时完成.
加载文档及其脚本/样式/图像资源时会触发onload事件,但如果在加载页面时正在执行任何javascript,则可能不希望等待图像.相反,使用类似jQuery的“ready”事件或通过在body的末尾放置一个脚本标记来激活你自己的“DOMReady”事件：
<body>
<!-- your page contents here -->
<script type="text/javascript">
// DOM is ready,do scripty stuff now
DOMReady();
</script>
</body>
