Is loading the window inside the document ready?

Question

Sorry if this was answered before, but all searches talk about differences, and not about using the two together if possible.

Simply, $(window).load.(function() {}) can I use INSIDE for $(document).ready.(function() {}) ?

I have some things to do after loading the DOM, but then I want to show some elements only after the images have finished loading. The only thing that works in Explorer 8 is to put the $(window).load inside $(document).ready with everything else.

Is this an acceptable practice?

I just want to use the most acceptable method to show a DIV that contains small images, such as a toolbar, after a complete build. ( visibility hidden compared to display none , for example). The HTML for this DIV written by code inside $(document).ready , and then added to the body using $('body').append() before using $(window).load .

I have a lot of problems with Explorer 8.

Answer 1

This works great and is an acceptable practice. In the end, as you described, there may be times when the logic in the $(window).load() handler depends on the work that is done after the DOM is ready. If the window has already been loaded by the time $(window).load() , the handler will immediately start immediately.

Answer 2

EDIT:

NOTE. This answer applies only to jQuery v2 and below.

---

jQuery .ready() event :

The handler passed to .ready() is guaranteed to be executed after the DOM is ready , so this is usually the best place to attach all other event handlers and run other jQuery code.

jQuery .load() event method :

The load event is dispatched to an element when it and all subelements have been fully loaded . This event can be sent to any element associated with the URL: images, scripts, frames, iframes and window objects.

Based on the above jQuery documentation, I did not see anything, which would indicate any problems with the following:

 $(document).ready(function () { // will fire IMMEDIATELY after the DOM is constructed $(window).load(function() { // will only fire AFTER all pages assets have loaded }) }); 

Placing a .load inside ready just ensures that the DOM is ready every time load starts.

You can put all jQuery code in one ready-made DOM handler, but it can still have a subset of jQuery code for which all images are loaded first. This scheme ensures that all codes will be run once on the DOM, and the rest will be run subsequently whenever the page resources have finished loading.

Ultimately, this may be more of a matter of personal preference, but the OP clearly asks if this organization can cause problems. This has not been confirmed.

Answer 3

Caution : The answers to this question are quite outdated.

As @ViRuSTriNiTy mentions in the comments that this code is already invalid in jQuery 3, and it was mentioned as a problem on GitHub .

So this method is no longer recommended.

One way to do this is to use the following code

 $(window).on("load", function(){ $.ready.then(function(){ // Both ready and loaded }); }) 

However, this code will not work if you upload images in the finished form and want to call some code after it is fully downloaded.