$(window).on('load')在jQuery(document).ready()中未被正确调用

rpppsulh  于 2023-04-11  发布在  jQuery
关注(0)|答案(4)|浏览(208)

我曾经在我的JavaScript文件中有这段代码,它曾经工作过...

jQuery(document).ready(function ($) {
    "use strict";

    $(window).load(function (event) {
        LoadPage();
    });

在将jQuery更新到3.3.1版本后,我不得不将$(window).load替换为$(window).on('load'),因为它已被弃用。因此,这是新代码:

jQuery(document).ready(function ($) {
    "use strict";

    $(window).on('load', function (event) {
        LoadPage();
    });

问题是这个新代码,并不总是像预期的那样运行...在Chrome中,LoadPage()方法被按预期调用。如果我使用MS Edge,它根本不会命中LoadPage()方法。如果我使用Chrome隐身模式,它有时会命中该方法,有时不会...知道为什么会发生这种情况吗?

sdnqo3pr

sdnqo3pr1#

我在这里找到了答案:jQuery 3 - Github Issues
以下是来自jQuery核心团队的Timmy Willison的解释:
为了清楚起见,我们理解是什么导致了这个问题。我们最近让ready处理程序异步触发。这有很难给予的优点。缺点是如果load事件触发得足够快,ready处理程序有时会在load事件之后触发。您在这个问题中看到的副作用是,您在load事件已经触发之后绑定了load事件处理程序。
修复方法是在ready之外绑定负载:
下面是函数的调用方式:

$(function() {
  // Things that need to happen when the document is ready
});

$(window).on("load", function() {
  // Things that need to happen after full load
});
i34xakig

i34xakig2#

你不能期望jQuery跨浏览器实现完美地工作,因为没有完美的软件。
首先,我建议使用平原

window.onload = function() {
    // Your code here
};

并尝试它是否适用于您的目标浏览器。
第二,你需要努力研究和实施变通方法。如果这样做有效,请在这里发布以帮助其他人。

yzckvree

yzckvree3#

我不得不抛弃jQuery,将它们分开,并使用普通的旧JavaScript。这在IE 11,Edge,Chrome和Firefox中表现一致。

document.addEventListener('DOMContentLoaded',function () {'do stuff'}

window.onload = function () {'then do this stuff'}
4ngedf3f

4ngedf3f4#

我今天遇到了这个问题。因为我必须在页面上的document.ready之后触发第三方代码,但该代码已经有window.on("load")了。所以我必须像这样对jQuery on函数进行猴子修补。

(function safeLoaded($){
    var old = $.fn.on;
    var monkey_on = function(){
        if(this[0] == window && arguments[0] == "load"){
            if (typeof arguments[1] === 'function' && document.readyState === "complete"){
                arguments[1].call(this);
                return this;
            }
        }
        return old.apply(this, arguments);
    };
    $.fn.on = monkey_on;
})(jQuery);

如果文档已经加载,直接触发函数就可以了,不需要为它添加事件监听器。不知道为什么jQuery上不这样做。

相关问题