Page Load Events

Executing code when a page loads - traditional vs modern approaches.

Traditional Approach

W3Schools Example

Page Load Example (See original)

<!DOCTYPE html>
<html>
<body onload="myFunction()">
<h1>HTML DOM Events</h1>
<h2>The onload Event</h2>

<script>
function myFunction() {
  alert("Page is loaded");
}
</script>

</body>
</html>

Try It

Click the button above to simulate the page load event...

Analysis

✓ Pros

  • Very simple syntax
  • Works in very old browsers
  • Easy for beginners to understand

✗ Cons

  • Inline onload attribute mixes HTML and JavaScript
  • Only one function can be assigned (no multiple handlers)
  • Waits for ALL resources (images, stylesheets) to load
  • No separation of concerns
  • Alert boxes are disruptive to user experience

Modern Approach

Current Best Practices

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Modern Page Load</title>
</head>
<body>

<h1>HTML DOM Events</h1>
<h2>The DOMContentLoaded Event</h2>
<p id="status">Waiting for page to load...</p>

<script>
  // Modern approach - runs as soon as DOM is ready
  document.addEventListener('DOMContentLoaded', () => {
    const statusElement = document.getElementById('status');
    
    // Show loading state
    statusElement.textContent = 'Loading...';
    statusElement.style.color = '#ff9800';
    
    console.log('DOM is ready! Starting initialization...');
    
    // Simulate initialization work with a delay
    setTimeout(() => {
      statusElement.textContent = 'Page loaded successfully!';
      statusElement.style.color = 'green';
      statusElement.style.fontWeight = 'bold';
      
      console.log('Initialization complete!');
    }, 1500);
  });
</script>

</body>
</html>

Try It

Click the button above to simulate the page load event...

Analysis

✓ Pros

  • Separates HTML and JavaScript (better organization)
  • Runs as soon as DOM is ready (faster execution)
  • Doesn't wait for images/stylesheets to load
  • Multiple event listeners can be added
  • Uses modern addEventListener with arrow functions
  • Updates page content instead of disruptive alerts
  • Console logging for debugging instead of alerts

✗ Cons

  • Slightly more code to write
  • Requires understanding of event listeners
  • Not supported in very old browsers (IE8 and below)

🎯 Key Takeaways

  • Traditional Approach: Uses inline onload attribute in the <body> tag
  • Modern Approach: Uses DOMContentLoaded event with addEventListener
  • Best Practice: Avoid inline event handlers; use DOMContentLoaded for better performance
  • Performance: DOMContentLoaded fires faster than window.onload (doesn't wait for images)
  • User Experience: Update page content instead of using disruptive alert boxes
  • Multiple Handlers: Modern approach allows multiple initialization functions to run on load
  • Debugging: Use console.log instead of alerts for development feedback

💡 Pro Tip:

The DOMContentLoaded event fires when the HTML document has been completely parsed, without waiting for stylesheets, images, and subframes to finish loading. This means your JavaScript can start executing faster, improving perceived page performance!

🚀 Performance Note:
Use DOMContentLoaded when you need to manipulate the DOM as soon as possible. Use window.addEventListener('load', ...) only if you need to wait for all resources (images, stylesheets) to load completely.