为什么切换到jQuery 3后我的’load’事件/函数没有被执行？

由于我已经从jQuery 1.x / jQuery 2.x升级到jQuery 3.x ，我的现有代码将不再正确执行。 一切正常，但load事件监听器不再被触发或只是有时：

 $(function() { $(window).on("load", function() { // this line will never/occasionally be executed console.log("window is loaded!"); }); }); 

Answer 1

使用/切换到jQuery 3时可能会出现此问题。 这是因为新jQuery 3中的所有ready states现在都是完全asynchron 。 这意味着，没有给定代码执行的命令。

因此，可能会发生，在执行ready state 之前已触发load 。 当你的ready函数现在最终被触发时，你的load监听器太晚了，不会被执行。

---

jQuery用法：

要更改此行为，只需删除load事件侦听器初始化周围的ready state 。 没有必要用ready函数封装它。 你可以不用初始化它们。

 // $(function() { $(window).on("load", function() { // this line will now be executed again console.log("window is loaded!"); }); // }); 

如果您需要或想要注册这两个事件，您可以自己注册load事件，并在ready state内决定下一步做什么。

 // track the loading state by yourself var windowLoaded = false; $(window).on("load", function() { windowLoaded = true; }); $(function() { function afterLoad() { console.log("loaded"); } // decide inside your ready state what to do if( !windowLoaded ) { $(window).on("load", afterLoad); } else { afterLoad(); } }); 

---

jQuery插件：

另一种情况是jQuery插件，它也使用了load事件。 例如：

 (function($, window) { $.fn.myPlugin = function() { $(window).on("load", start); function start() { console.log("plugin initialized and window loaded"); } }; })(jQuery, window); 

如果开发人员/用户现在将插件初始化包装在ready state则问题可能再次发生，就像之前解释的那样：

 $(function() { $("#element").myPlugin(); }); 

解决方案是自己跟踪插件中的load事件，以打破 ready state 。

 (function($, window) { // track the loading state beside the plugin initialization var windowLoaded = false; $(window).on("load", function() { windowLoaded = true; }); $.fn.myPlugin = function() { // decide inside your plugin how to start if( !windowLoaded ) { $(window).on("load", start); } else { start(); } function start() { console.log("plugin initialized and window loaded"); } }; })(jQuery, window); 

---

结论：

即使你没有遇到这个问题，在你的测试中，你应该在使用jQuery 3时立即更改这些代码，因为其他用户/不同的浏览器可能会遇到这个问题。 其他人可能会遇到问题，因为它是asynchron ，你永远不知道你的代码何时被执行…