javascript - $(window).on('load') does not get called correctly inside jQuery(document).ready() - Stack Overflow

admin管理员组

文章数量:1344593

I used to have this code in my JavaScript file, and it used to work...

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

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

after updating jQuery to version 3.3.1, I had to replace $(window).load with $(window).on('load') as it is deprecated. So this is the new code:

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

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

Problem is this new code, does not behave as expected all the time... in Chrome LoadPage() method is called as expected. If I used MS Edge, it does not hit LoadPage() method at all. If I use Chrome incognito mode, it sometimes hit the method and sometimes doesn't... any idea why this is happening?

I used to have this code in my JavaScript file, and it used to work...

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

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

after updating jQuery to version 3.3.1, I had to replace $(window).load with $(window).on('load') as it is deprecated. So this is the new code:

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

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

Problem is this new code, does not behave as expected all the time... in Chrome LoadPage() method is called as expected. If I used MS Edge, it does not hit LoadPage() method at all. If I use Chrome incognito mode, it sometimes hit the method and sometimes doesn't... any idea why this is happening?

• javascript
• jquery

Share Improve this question Follow edited Feb 10, 2018 at 10:38 asked Feb 10, 2018 at 5:20 user9157250user9157250 5

• 3 why do you need to use load event inside $(document).ready()? what's wrong with .ready() alone? – Pezhvak Commented Feb 10, 2018 at 5:56
• Thanks Pezhvak, when page is ready, a progress bar appears on the page. when page loads, I hide the progress bar. – user9157250 Commented Feb 10, 2018 at 5:58
• 1 you are trying to call a window.load inside a .ready call back. you may want to run the window.load callback outside of your .ready callback. basically you are asking the code to fire an window.load, but to wait for the document to be ready. so in theory your function should never run! – Sandra Willford Commented Feb 10, 2018 at 5:59
• 1 register your .on('load) event outside .ready() – Pezhvak Commented Feb 10, 2018 at 6:03
• Thanks Sandra and Pezhvak: it seem like from jQuery 3, windows.load cannot be inside document.ready. I have posted a link to the github page. – user9157250 Commented Feb 10, 2018 at 6:28

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

OK, I found the answer here: jQuery 3 - Github Issues

This is explanation, by Timmy Willison from jQuery Core Team:

To be clear, we understand what's causing this. We recently made ready handlers fire asynchronously. This has advantages that are hard to give up. The disadvantage is that the ready handler can sometimes fire after the load event if the load event fires quickly enough. The side effect you're seeing in this issue is that you're binding a load event handler after the load event has already fired.

The fix is to bind the load outside of ready:

This is how the functions should be called:

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

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

You cannot expect that jQuery cross-browser implementation will work perfectly. There is no perfect software.

First, I suggest to use the plain

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

and try if it works on your target browsers.

Second, You need to make effort to research and implement workarounds. If that works, post it here to help others.

I got this problem today. As i must trigger third-party code after document.ready on my page but that code already have window.on("load") on it. So i have to monkey-patching jQuery on function like this.

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

If document has already loaded, just trigger function directly instead of add event listener for it. Don't know why they don't do this on jQuery.

I had to ditch jQuery for both, separate them, and use plain old JavaScript. This behaves uniformly across IE 11, Edge, Chrome, and Firefox.

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

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

本文标签： javascript(window)on(39load39) does not get called correctly inside jQuery(document)ready()Stack Overflow