What are the differences between JavaScript’s window.onload and jQuery’s $(document).ready() method?

Here’s a detailed comparison of window.onload (JavaScript) and $(document).ready() (jQuery), including their differences, use cases, and examples:

1. Execution Timing

window.onload	$(document).ready()
Waits for the entire page to load (HTML, CSS, images, scripts, iframes).	Fires when the DOM is parsed (HTML structure is ready), before images/stylesheets finish loading.
Slower execution.	Faster execution.

Example:

// JavaScript
window.onload = function() {
    console.log("All resources loaded, including images");
};

// jQuery
$(document).ready(function() {
    console.log("DOM ready, images may still be loading");
});

2. Multiple Handlers

window.onload	$(document).ready()
Overrides previous handlers if assigned directly (e.g., window.onload = ...).	Supports multiple handlers; all execute in the order they’re defined.
Use addEventListener('load', ...) to add multiple handlers in vanilla JS.	No risk of overwriting.

Example:

// Vanilla JS (overrides previous handlers)
window.onload = function() { console.log("Handler 1"); };
window.onload = function() { console.log("Handler 2 (overrides 1)"); };

// Vanilla JS (supports multiple handlers)
window.addEventListener('load', () => console.log("Handler A"));
window.addEventListener('load', () => console.log("Handler B"));

// jQuery (multiple handlers work)
$(document).ready(() => console.log("jQuery Handler 1"));
$(document).ready(() => console.log("jQuery Handler 2"));

3. Syntax & Compatibility

window.onload	$(document).ready()
Native JavaScript (works without libraries).	Requires jQuery.
Uses the load event.	Wraps the DOMContentLoaded event.

Vanilla JS Alternative to ready():

document.addEventListener('DOMContentLoaded', function() {
    console.log("DOM ready without jQuery");
});

4. Use Cases

window.onload	$(document).ready()
Scripts requiring image dimensions or external resources.	DOM manipulation (e.g., attaching event listeners, modifying elements).
Interacting with third-party widgets/ads that load slowly.	Initializing UI components (e.g., buttons, forms).

5. Execution Order

1. $(document).ready() (or DOMContentLoaded) fires first.
2. window.onload fires later, after all resources load.

Example:

$(document).ready(() => console.log("DOM ready"));
window.onload = () => console.log("Window loaded");

// Output order:
// 1. "DOM ready"
// 2. "Window loaded"

6. Edge Cases & Pitfalls

• Image Loading: Using ready() for image-dependent code may fail:

  // Incorrect (image may not be loaded yet)
  $(document).ready(() => {
      console.log("Image height:", $("#myImage").height()); // Returns 0
  });

  // Correct
  window.onload = () => {
      console.log("Image height:", $("#myImage").height()); // Accurate value
  };

• jQuery Shorthand: $(function() { ... }) is equivalent to $(document).ready().

Performance Comparison

• $(document).ready(): Better for perceived performance (executes earlier).
• window.onload: Necessary for resource-heavy operations but delays interactivity.

Summary Table

Feature	window.onload	$(document).ready()
Trigger Condition	All resources loaded	DOM parsed
Multiple Handlers	Yes (with addEventListener)	Yes
Execution Speed	Slower	Faster
jQuery Dependency	No	Yes
Use Case	Image/Resource-dependent scripts	DOM manipulation

When to Use Which

• Use $(document).ready() for most DOM interactions (faster execution).
• Use window.onload for scripts requiring fully rendered resources (e.g., images, ads).