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

Question

自从我从升级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.这是因为ready states新的所有人jQuery 3现在都完全asynchron.这意味着,没有给定代码执行的命令.

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

jQuery用法:

要更改此行为,只需删除事件侦听器初始化ready state周围load.没有必要用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,您永远不知道您的代码何时/是否被执行...