Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

225
Views
window load inside a document ready?

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

Simply, can $(window).load.(function() {}) be used INSIDE of $(document).ready.(function() {}) ?

I have some things that should be done after the DOM is loaded but then I want to reveal certain elements only after the images have finished loading. The only thing that works in Explorer 8, is putting the $(window).load functions inside of the $(document).ready with everything else.

Is this an acceptable practice?

I just want to use the most acceptable method to reveal a DIV that contains small images, like a toolbar, after it's fully constructed. (visibility hidden versus display none, for example). The HTML for this DIV is written by the code inside the $(document).ready and then appended to the body using $('body').append() before using the $(window).load.

I'm having lots of problems with Explorer 8.

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

This works fine and is an acceptable practice. After all, as you describe, there may be cases where the logic in the $(window).load() handler depends on work taking place after the DOM is ready. If the window is in fact already loaded by the time you set up $(window).load(), the handler will just fire immediately.

over 4 years ago · Santiago Trujillo Report

0

I ran into this problem recently... from jQuery version 3, we can no longer put $(window).on('load') inside document.ready()... because ready handler are called asynchronously, which means ready can be called after load.

From jQuery Core Team: Github: jQuery 3 issues

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.

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

$(window).on("load", function() {
   // Things that need to happen after full load
});
over 4 years ago · Santiago Trujillo Report

0

EDIT:

NOTE: This answer is only applicable 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 sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

Based on the jQuery documentation above, I've seen nothing that would indicate any issues 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 of a ready simply guarantees that the DOM is ready whenever the load is fired.

One may wish to place all jQuery code within a single DOM ready handler, and yet still may have a sub-set of jQuery code that requires all images be loaded first. This arrangement guarantees that all code be triggered once on DOM ready and the rest will be triggered subsequently whenever the page assets have finished loading.

This may ultimately be more of an issue of personal preference, however the OP was clearly asking if this arrangement would cause problems. This has not proven to be true.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!