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

593
Views
What is the difference between $(window).load and $(document).ready?

I have been having a problem lately with my JavaScript CODE and taking a portion of my code out of my $(document).ready() and putting it within $(window).load() fixed the problem.

Now I understand that window.load is fired just after document.ready, but why is it not ready after document.ready, that is after window.load()?

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

load is called when all assets are done loading, including images. ready is fired when the DOM is ready for interaction.

From the MDC, window.onload:

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

From the jQuery API documentation, .ready( handler ):

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. 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. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

over 4 years ago · Santiago Trujillo Report

0

$(document).ready() means that the DOM of your page is ready to be manipulated.

window.load() is triggered when the whole page (incl. components like CSS and image files) has been completely loaded.

What are you trying to achieve?

over 4 years ago · Santiago Trujillo Report

0

$(document).ready(function(){
//code here
});

The code above is used almost every time when we work with jQuery.

This code is used when we want to initialize our jQuery codes after the DOM is ready.

$(window).load()

Sometimes you want to manipulate pictures. For example you want to vertically and horizontally align a picture and you need to get the width and height of the picture in order to do that. With $(document).ready() you won’t be able to do that if the visitor doesn’t have the image already loaded, in which case you need to initialize the jquery alignment function when the image finishes loading. That’s where we use $(window).load()

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!