$(window).on('load')不能正确在jQuery(document).ready()内被调用。

Question

我以前在我的JavaScript文件中有这段代码，它以前是工作的...

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

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

在将jQuery版本更新到3.3.1之后，我必须用$(window).on('load')替换掉已经弃用的$(window).load。所以这就是新代码：

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

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

问题在于这段新代码，并不总是按照预期的方式运行...在Chrome浏览器中，LoadPage()方法会按照预期被调用。但如果我使用MS Edge浏览器，则完全没有命中LoadPage()方法。如果我使用Chrome的隐身模式，则有时候会命中该方法，有时候则不会...你知道为什么会出现这种情况吗？

- user9157250

---

为什么需要在$(document).ready()内使用load事件？仅使用.ready()有什么问题吗？ - Pezhvak

谢谢Pezhvak，当页面准备好时，页面上会出现一个进度条。当页面加载完成后，我会隐藏进度条。 - user9157250

你正在尝试在.ready回调中调用window.load。你可能想要在.ready回调之外运行window.load回调。基本上，你正在要求代码触发一个window.load，但要等待文档准备就绪。因此理论上你的函数应该永远不会运行！ - Sandra Willford

将您的 .on('load') 事件注册到 .ready() 之外。 - Pezhvak

感谢Sandra和Pezhvak的帮助：从jQuery 3开始，windows.load不能放在document.ready里面了。我已经在GitHub页面上发布了链接。 - user9157250

Answer 1

好的，我在这里找到了答案：jQuery 3 - Github Issues

以下是 jQuery 核心团队成员 Timmy Willison 的解释：

明确一下，我们知道是什么导致了这个问题。我们最近使准备好的处理程序异步触发。这有一些难以放弃的优势。缺点是，如果 load 事件触发得足够快，准备好的处理程序有时会在 load 事件之后触发。您在此问题中看到的副作用是，在 load 事件已经触发后绑定了一个 load 事件处理程序。

修复方法是在 ready 外部绑定 load：

这是如何调用函数的：

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

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

- user9157250

Answer 2

您不能指望jQuery跨浏览器实现完美无缺。没有完美的软件。

首先，我建议使用纯

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

首先，您需要在目标浏览器上尝试并检查其是否可行。

其次，您需要努力研究和实施解决方法。如果有效，请在此处发布以帮助他人。

- CodeLover

---

几个其他的问题说document.ready总是在window.load之前。 - Barmar

Answer 3

我不得不放弃jQuery，将它们分开，并使用纯旧JavaScript。这在IE 11、Edge、Chrome和Firefox上表现一致。

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

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

- tnJed

Answer 4

今天我遇到了这个问题。因为我必须在页面上的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没有这样做。

- takid1412