PrismitaLEARN · PRACTICE · GROW

What is the difference between $(document).ready() and $(window).on('load')?

jQuery DOM Basic Fresher1–2 Yrs Conceptual 1 min read

Quick Answer

$(document).ready() (or the shorthand $(function(){})) fires when the DOM is parsed and ready to manipulate — it doesn't wait for images/stylesheets. $(window).on('load') fires later, after everything including images and iframes has finished loading.

$(document).ready runs as soon as the HTML is parsed and the DOM is usable — it doesn't wait for images or CSS files to download. $(window).on('load') waits for absolutely everything, including images. So 99% of the time I use ready, or its shorthand where you just pass a function to $(), because I want to wire up event handlers and init components as early as possible. load is only for when I need an image's real height or the fully painted layout.

  • Use ready for almost everything — attach handlers, initialise widgets.
  • Use load only when you need final dimensions of images or a fully rendered layout.
  • Native equivalents: DOMContentLoaded and the load event. A <script defer> at the end of <body> often removes the need for ready entirely.
All jQuery questions More on DOM