0

As I know, jQuery ready handler can sometimes fire after the load event if the load event fires quickly enough.

I'm trying to resolve this ambiguity. So, I want to be sure that ready fires first and load second, under all circumstances.

Here is my attempt:

$(document).ready(function() {
    console.log('Ready comes first');
});

$(window).on('load', function() {
    $.ready.then(function() {
        console.log('Onload comes second');
    });
});

Is it correct? Probably I missed something?

Edit: And now Royi Namir says that load almost everytime will hit first (i.e. before ready), altough I tend to think vice versa. Now I do not understand anything.

john c. j.
  • 725
  • 5
  • 28
  • 81
  • load comes first. then ready. – Royi Namir Jan 29 '18 at 17:50
  • @RoyiNamir Hm, I tend to think that typically `ready` comes first. It is stated, for example, in the beginning of this article: https://learn.jquery.com/using-jquery-core/document-ready/ and here: https://stackoverflow.com/a/2683206/5587480. Anyway, I'm novice in jQuery and any my assumptions are possibly wrong. – john c. j. Jan 29 '18 at 17:56
  • Do you want to place the `jquery ready` inside the `window load` body? – Mohi Jan 29 '18 at 18:06
  • https://i.imgur.com/6xYWwqE.jpg – Royi Namir Jan 29 '18 at 18:07
  • @RoyiNamir Well, your score is much greater then my, but probably this is the case, which was described in the beginning of my post ("As I know, jQuery ready handler can sometimes fire after the load event if the load event fires quickly enough") ? – john c. j. Jan 29 '18 at 18:17
  • What's your question ? – Royi Namir Jan 29 '18 at 18:18
  • @RoyiNamir How to make sure that `ready` fires first and `load` fires second, under all circumstances. – john c. j. Jan 29 '18 at 18:20
  • 1
    The answer is : you can't. load almost everytime - will hit first. it would be better if you tell us what you're trying to do becuase I think you're going the wrong path – Royi Namir Jan 29 '18 at 18:21
  • Your question is an [X/Y Problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). Tell us what problem you are trying to solve instead of asking for help with the solution, which does not appear to be the correct approach. –  Jan 29 '18 at 18:54
  • I'm voting to close this question as off-topic because this is an X/Y problem. –  Jan 29 '18 at 18:57
  • @JarrodRoberson As I understand, you agree with Royi Namir that `load` almost everytime will hit before `ready`? I don't understand why. Almost everywhere on the internet it is clearly stated that `ready` hits *first*. For example, here: https://learn.jquery.com/using-jquery-core/document-ready/ – john c. j. Jan 29 '18 at 19:01
  • @JarrodRoberson Yes, strictly speaking. But **most of the time**, *as I tend to think*, `ready` comes *first*. [Quote from jQuery Core Team Lead](https://github.com/jquery/jquery/issues/3194#issuecomment-228556922): "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." – john c. j. Jan 29 '18 at 19:09
  • I am saying the opposite of what @RoyiNamir is saying. That case they show is possible but not probable from my experience with concurrent code and reading of the jQuery source. –  Jan 29 '18 at 23:24

1 Answers1

0

If you want to be 100% sure, place load inside of ready.

$(document).ready(function() {
    console.log('Ready comes first');
    $(window).on('load', function() {
        console.log('Onload comes second');
    });
});

This doesn't quite answer why or how load might occur before ready, but it will fix your problem without using anything tricky or leaving any question as to which runs first.

Goose
  • 4,764
  • 5
  • 45
  • 84
  • Hi. Thanks for help, but with current jQuery version (3.3.1) the "load" message is not showing. It gives me only "Ready comes first". This problem was described here: https://github.com/jquery/jquery/issues/3194 - see 1st post from **eisbehr** (including provided jsFiddle), and then posts from **timmywil** ("To be clear...") and **dmethvin** ("Agreed, and that..."). – john c. j. Jan 29 '18 at 20:45