为什么window.onload事件发生在$（document）.ready之前？
[英]Why does window.onload event occur before $(document).ready?
问题描述
As stated in this thread: window.onload vs $(document).ready() . 
如此线程中所述： window.onload vs $（document）.ready（） 。 The window.onload should occur later than the $(document).ready() but in this simple code the log would show that the onload event is executed before the ready event? window.onload应该晚于$(document).ready()但是在这个简单的代码中，日志会显示onload事件是在ready事件之前执行的吗？ What I'm I missing here? 我在这里想念的是什么？
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <h1>A Simple Site</h1> <script> $(document).ready(function() { console.log("ready event fired"); }) window.onload = function() { console.log("onload event fired"); } </script> </body> </html>
3 个解决方案
解决方案1
11 已采纳 2016-11-20 20:44:59
The problem is not with the order of the events. 问题不在于事件的顺序。 It with the jQuery wrapper around the native DOM events. 它与本机DOM事件周围的jQuery包装器。 If you try the native DOMContentLoaded you will find that it always runs before window.onload . 如果您尝试使用本机DOMContentLoaded您会发现它始终在window.onload之前运行。 But the jQuery event $(document).ready will come some milliseconds after DOMContentLoaded , which in some cases might be after window.onload too, especially if the page doesn't have much to load like the code below. 但是jQuery事件$(document).ready将在DOMContentLoaded之后几毫秒出现，在某些情况下也可能在window.onload之后，特别是如果页面没有像下面的代码那样加载很多。 This is delay is due to jQuery implementation. 这是延迟是由于jQuery的实现。
If you uncomment the iframe in the code though, it takes some time to load which causes the window.onload to be delayed, so $(document).ready will come first. 如果您在代码中取消注释iframe，则需要一些时间来加载，这会导致window.onload被延迟，因此$(document).ready将首先出现。
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <h1>A Simple Site</h1> <!-- <iframe src="http://stackoverflow.com"></iframe> --> <script> $(document).ready(function() { console.log("jQuery ready"); }) document.addEventListener("DOMContentLoaded", function(event) { console.log("DOM ready"); }); window.onload = function() { console.log("DOM loaded"); } </script> </body> </html>
解决方案2
1 2016-11-15 11:45:09
@RoryMcCrossan saying is right, you have nothing in your html to be load on window like(image,video etc ). @RoryMcCrossan说是对的，你的html没有任何内容可以加载到window （图像，视频等）。 Now you can see how behavior of event is changed 现在您可以看到事件的行为是如何改变的
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <img src="http://www.wallpapereast.com/static/images/Unique-And-Beautiful-Wallpaper-HD.jpg" alt="Alternate Text" /> </head> <body> <h1>A Simple Site</h1> <script> $(document).ready(function() { console.log("ready event fired"); }) window.onload = function() { console.log("onload event fired"); } </script> </body> </html>
解决方案3
0 2019-01-30 13:06:14
This is a "feature" of jQuery 3. jQuery 1.X has always handled $(document).ready before $(window).on('load'). 这是jQuery 3的“特性”.jQuery 1.X 总是在$（window）.on（'load'）之前处理$（document）.ready。 Furthermore, $(window).load() can be considered as an event when page is rendered. 此外，$（window）.load（）可以被视为呈现页面时的事件。 I'm 100% certain in this because now I just had an attempt to upgrade jQuery version to 3.X in a project that's been working stable with jQuery 1.X for almost 10 years. 我100％肯定这是因为现在我只是尝试将jQuery版本升级到3.X，这个项目在jQuery 1.X中已经运行了近10年。 So this attempt has turned into a month of headache struggling with $(document).ready and $(window).load. 所以这个尝试已经变成了一个令人头疼的月份，因为$（document）.ready和$（window）.load而苦苦挣扎。 Finally it was decided to leave it with jQuery 1.12.4, the latest of 1.X generation. 最后决定将它留给jQuery 1.12.4，这是最新的1.X代。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.