In-depth Analysis and Comparison of $(document).ready vs $(window).load in jQuery

Core Concepts and Execution Timing Differences

In jQuery development, $(document).ready and $(window).load are two commonly used event handling methods, but they differ fundamentally in execution timing and applicable scenarios.

$(document).ready(function(){}) executes immediately when the HTML document is loaded and the DOM tree is constructed and ready. At this point, all HTML elements in the page are parsed and available, but external resources (such as images, stylesheets, script files, etc.) may not be fully loaded. This mechanism ensures that scripts can execute as soon as the DOM is available, thereby enhancing user experience.

In contrast, $(window).load(function(){}) only triggers after the entire page and all its dependent resources are completely loaded. This includes all content such as images, iframes, external CSS, and JavaScript files. Since it waits for all resources to download, this method executes significantly later than $(document).ready.

Code Examples and Execution Timing Demonstration

The following code clearly demonstrates the execution order difference between the two methods:

$(document).ready(function() {
  // Executes when HTML document is loaded and DOM is ready
  console.log("document is ready");
});

$(window).on('load', function() {
  // Executes when complete page is fully loaded, including all resources
  console.log("window is loaded");
});

During actual page loading, the console will first output "document is ready" followed by "window is loaded". This time difference can range from hundreds of milliseconds to several seconds, depending on the quantity and size of page resources.

Important Changes in jQuery 3.0

Starting from jQuery 3.0, the .load(), .unload(), and .error() methods have been removed. These methods were originally shortcuts for event operations but had API limitations and naming conflicts.

Specifically, the .load() method conflicted with Ajax's .load() method, and the .error() method was incompatible with window.onerror. Therefore, the jQuery team decided to remove these methods and recommend using the more unified .on() method for event binding.

The original $(window).load(function(){}) should be changed to:

$(window).on('load', function(e) {
  // Handle window load completion logic
});

Equivalent Syntaxes and Syntactic Sugar

jQuery provides multiple equivalent syntaxes for handling document ready events, all functionally identical:

$(function(){
  // Concise syntax
});

jQuery(document).ready(function(){
  // Full syntax, avoiding $ conflicts
});

$(document).ready(function(){
  // Standard syntax
});

$(document).on('ready', function(){
  // Event listener syntax
})

All these syntaxes achieve the same function: executing the specified callback function after the DOM is ready. Developers can choose the most suitable syntax based on personal preference and project requirements.

Detailed DOM Loading Process

Understanding the DOM loading process is crucial for correctly using these events. DOM loading primarily consists of two stages:

First, the browser downloads the HTML document and begins parsing it, constructing the DOM tree. When the DOM tree construction is complete, the DOMContentLoaded event triggers, at which point $(document).ready related callback functions begin execution. This stage only concerns the HTML structure and does not wait for external resources.

Subsequently, the browser continues loading all external resources referenced in the page, including images, CSS, JavaScript files, etc. When all resources are loaded, the load event triggers, at which point $(window).load (or $(window).on('load')) callback functions begin execution.

Application Scenarios and Best Practices

Based on different execution timings, the two methods have their own optimal application scenarios:

When to use $(document).ready:

• DOM element manipulation and event binding
• Initializing page interaction functionality
• Performing calculations that don't depend on resource dimensions
• Initialization of most jQuery plugins

When to use $(window).on('load'):

• Operations requiring actual image dimensions
• Calculations dependent on external resource loading completion
• Statistical analysis after complete page loading
• Initialization of resource-intensive operations

In most web development scenarios, $(document).ready is the preferred choice because it provides faster response times, making users perceive the page as loading quicker. Only when truly necessary to wait for all resources to load should $(window).on('load') be used.

Performance Optimization Considerations

From a performance perspective, appropriate selection of event handling methods significantly impacts page loading speed. Using the browser developer tools' network panel, two key timelines can be observed: the blue DOMContentLoaded timeline and the red Load timeline.

In practical projects, if a page contains numerous images or other large resources, the gap between these two time points can be quite substantial. By placing as much initialization logic as possible in $(document).ready, user-perceived loading speed can be significantly improved.

Additionally, attention must be paid to jQuery 3.0+ compatibility issues, ensuring the correct .on('load') syntax is used to replace the deprecated .load() method, guaranteeing long-term code maintainability.