⏱️ Event Timing Comparison

Event Timeline

0ms 📄 Page Start HTML parsing begins...

📊 What's Happening?

DOMContentLoaded fires when the HTML document has been completely parsed and the DOM tree is built. It doesn't wait for images, stylesheets, or other external resources.

window.load fires only after ALL resources (images, stylesheets, scripts, iframes, etc.) have finished loading.

Notice: The time difference between these two events! Large images or slow network connections make this difference even more dramatic.

Educational image 1
Image 1 (simulated slow load)
Educational image 2
Image 2 (simulated slow load)
Educational image 3
Image 3 (simulated slow load)
Educational image 4
Image 4 (simulated slow load)

📝 HTML Structure

<div class="event-log">
  <h2>Event Timeline</h2>
  <div id="eventLog">
    <!-- Events will be dynamically added here -->
  </div>
</div>

<div class="images-container">
  <div class="image-box">
    <img src="https://images2.pics4learning.com/catalog/g/gentoopenguin4copy.jpg">
    <div class="image-caption">Image 1</div>
  </div>
  <!-- More images... -->
</div>

🎨 CSS Animations

.event-entry {
  opacity: 0;
  transform: translateX(-20px);
  animation: slideIn 0.3s forwards;
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Color coding for different events */
.event-dom {
  background: #c8e6c9;
  border-left: 4px solid #4caf50;
}

.event-window {
  background: #fff9c4;
  border-left: 4px solid #ffc107;
}

⚡ JavaScript Event Listeners

const startTime = performance.now();
const eventLog = document.getElementById('eventLog');

function logEvent(eventName, color, borderColor) {
  const currentTime = performance.now();
  const elapsed = Math.round(currentTime - startTime);
  
  const entry = document.createElement('div');
  entry.className = 'event-entry';
  entry.style.background = color;
  entry.style.borderLeft = `4px solid ${borderColor}`;
  entry.innerHTML = `
    <span class="timestamp">${elapsed}ms</span>
    <span class="event-name">${eventName}</span>
    <span>Event fired!</span>
  `;
  eventLog.appendChild(entry);
}

// DOMContentLoaded - fires when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  logEvent('⚡ DOMContentLoaded', '#c8e6c9', '#4caf50');
});

// window.load - fires after ALL resources load
window.addEventListener('load', () => {
  logEvent('🎯 window.load', '#fff9c4', '#ffc107');
});