Which come first document.load or window.load

Question

When I try NProgress.js, as the document said, when document load start it, and when window loaded stop it. But I found it the scenario was reverse; If NProgress.done before starts, the progress will never end.

    if (typeof NProgress != 'undefined') {
        $(document).ready(function () {
            NProgress.done(); 
            console.log( "document loaded" );
        });

        $(window).on("load", function() {
            console.log( "window loaded" );
            NProgress.start();
        }); 
    };

The console log above will show "window loaded" before "document loaded". I have swapped the above code to make it works. Any idea?

I suppose I post a misleading question. I do understood the .ready and .load events. Actually I am applying NProgress.js to my web page, I noticed that the progress never finish loading[due to the .done() called prior to .start().] So I "experiment" those 2 events, and found that those 2 events do not follows accordingly. Now, my code above works. But does not follow documented convention, thus I seek for opinions.

@Rajesh: Not a duplicate. But that question has an answer to this. — sampathsris, Nov 21 '17 at 04:56
@Krumia You will hardly get exact duplicates. But I guess this qualifies as a relative duplicate. — Rajesh, Nov 21 '17 at 04:58
Where/how is this code called? And what browser? jQuery sometimes "simulates" events. Regardless, the only 'safe' way IMOHO is to add in proper ordering guards.. although maybe NProgress.start should be done "prior" to either of the events? — user2864740, Nov 21 '17 at 05:06
you ask for `document load` vs `window load` ... but your code is using `$(document).ready` ... and `document` has no `load` event — Jaromanda X, Nov 21 '17 at 05:07
`$(window).on("load"` is identical to `window.addEventListener('load'` ... there's a document event called "DOMContentLoaded" which will fire before `window load` ... document ready is last to fire — Jaromanda X, Nov 21 '17 at 05:09
@Rajesh: I found a real duplicate for this question, and I've flagged it accordingly. — sampathsris, Nov 21 '17 at 05:21

t.niese · Answer 1 · 2017-11-21T05:32:28.280

0

When the load and readyevent are attached before the document is loaded and the DOM is ready, then the ready event should be called before the load event.

For jQuery 3.2.1 it is possible to create a setup in which the ready event might be called after the jquery load event, while the native events are called in the order defined by the specs 12.2.7 The end:

window.addEventListener('load', function(e) {
  console.log('load');
}, true);

document.addEventListener('DOMContentLoaded', function(e) {
  console.log('DOMContentLoaded');
}, true);

$(document).ready(function() {
  console.log("jquery: ready");
});

$(window).on("load", function() {
  console.log("jquery: loaded");
});

OUTPUT

DOMContentLoaded
load
jquery: loaded
jquery: ready

jsfiddle demo

So in my opinion it is a bug of 3.2.1 if ready is called after load.

edited Nov 21 '17 at 05:32

answered Nov 21 '17 at 05:12

t.niese

39,256
9
74
101

Please notice `<>` icon in editor. You can use it to create a snippet – Rajesh Nov 21 '17 at 05:13
1

@Rajesh it is not reproduceable using the snipped tool of SO. Most likely because it injects the script to the `body` and not to the `head`. – t.niese Nov 21 '17 at 05:49
I am using Thymeleaf and Spring Boot, the "injects" sound relevant to my situation. My NProgress was in the home template where similar across all dynamic content. – Gian Nov 21 '17 at 07:07

Which come first document.load or window.load

1 Answers1