juniorjQuery

What is the difference between document.ready and window.load?

Updated May 14, 2026

Short answer

document.ready executes when the DOM is fully loaded, while window.load waits for the entire page including images, stylesheets, and external resources.

Deep explanation

The document.ready event is one of the most important concepts in jQuery. It ensures that the HTML DOM structure is fully parsed before executing JavaScript code.

The window.load event occurs later because it waits for:

  • Images
  • Videos
  • Stylesheets
  • Fonts
  • External resources

Using document.ready improves application responsiveness because scripts can execute before all heavy assets finish loading.

Execution order:

  1. HTML parsed
  2. document.ready fires
  3. Images/resources finish loading
  4. window.load fires

Best practice:

  • Use document.ready for DOM manipulation
  • Use window.load only when resource dimensions or assets are required

Real-world example

An eCommerce website may initialize navigation menus and forms using document.ready, but initialize image sliders requiring image dimensions using window.load.

Common mistakes

  • Using window.load unnecessarily can delay script execution and negatively impact perceived performance.

Follow-up questions

  • Why is document.ready preferred in most cases?
  • Can multiple document.ready handlers exist?
  • What happens if DOM elements are accessed before document.ready?

More jQuery interview questions

View all →