Why does $ (window) .load run before $ (document) .ready?

The DOMContentLoaded event that "calls" the document ready() method always occurs earlier based on the documentation: https://developer.mozilla.org/ru/docs/Web/API/Document/readyState

Therefore, we need your example.

 $(window).load(function() { console.log("window"); }); $(document).ready(function() { console.log("document"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

$(window).load

The load event occurs when the element itself and all its children are fully loaded. This event can occur on elements that have URL fields (window object, images, scripts, frames).

Note 1 : in some cases, if the picture is contained in the browser's cache, the load event may not occur. For such a case, you can use the special event event.special.load , which is defined in a small plugin.

Note 2 : if you do not require the readiness of multimedia files, it is better to use the .ready() method, which installs the document structure readiness handler, which occurs before the start of downloading multimedia files.

It's all very clear if we write $(window).load then the code written inside this construct will start working when the entire DOM including the images is ready . It is more logical to make such a call when it is necessary to work with images (calculation of image sizes or something else).

$(document).ready

$(document).ready code inside the block will start executing immediately after the DOM is ready, except for the images . The specified code will be executed immediately after the DOM is ready, without waiting for the complete loading of images. Calling $(document).ready several times will cause calls to be executed one after the other, in a sequence from top to bottom.

$(window).load or $(document).ready ?

Although it will take a lot of effort to reproduce this situation, there are still some nuances. Sometimes, this occurs when inside the ready event triggers a subscription to the load for example, or vice versa, which leads to strange behavior.

If you rely on some other answers, such as:

• After all $ (document). Ready ()
• window.onload vs $ (document) .ready ()
• multiple $ (document) .ready and $ (window) .load in $ (document) .ready

then you come to the conclusion that the $(window).load event $(window).load should always occur after $(document).ready . But, the presence of such behavior is available.

Now we will think about page caching. Yes, indeed, after the images have been cached, all the code you have written is likely to start executing sequentially, from top to bottom. Thus, there will be situations when $(window).load and $(document).ready both of these blocks will wait only for DOM loading, and if there is also a subscription to an event inside the event, then there will be a collision, and a worth $(window).load before $(document).ready executes earlier. In any case, a collision does not just happen and you need to fix the code and refactor it.

Useful links for familiarization:

• $(document).ready vs $(window).load vs window.onload
• Event handler load .load()
• DOM tree readiness handler .ready()
• .ready()
• .load()
• JQuery Reference Download Document

I carefully looked at the Network in DevTools and solved the problem by removing the ajax request that created the image and ran for 10 seconds.

Here is what happened: Ajax sending a request and not receiving an answer for some reason thought that DOM-built and it was time to trigger a load event, and after 10 seconds a response came from what seemed to be a dead request, so ready was done later load =)

$(document).ready - Works when the browser has loaded html and built a DOM дерево , and $(window).load - it works when all the resources are loaded (pictures, etc.), that is, theoretically $(document).ready works before, but after reloading the page, the resources (pictures) of us can be cached, in which case $(window).load can start to be executed approximately in conjunction with $(document).ready . $(document).ready .

Most likely a subscription to an event that arises later is already done from another handler of the load event. Other ways to reproduce this situation is unknown to me.