The Old NetISSUE #50 of 60

window events · load · resize · scroll

Pixel PeteVSQuirks Mode

Pixel Pete saysWindow events — load, DOMContentLoaded, resize, scroll — track page and viewport lifecycle.

DOMContentLoaded fires when the DOM is parsed (before images); load when everything finishes. resize and scroll fire frequently — throttle or debounce their handlers to stay smooth. Running setup code on DOMContentLoaded (or putting scripts at the end of body) ensures elements exist before you touch them.

Power-ups you unlock

DOMContentLoaded (DOM ready) vs load (everything)
resize & scroll fire rapidly — throttle them
Run setup after the DOM is ready
beforeunload for leave warnings

Quirks Mode attacks — common mistakes

Heavy work directly in scroll/resize (jank)
Touching elements before DOMContentLoaded
Relying on load when DOMContentLoaded suffices

Boss battleShow the window width on resize and run init on DOMContentLoaded.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre id="o"></pre>
<script>const o=document.getElementById('o');function show(){o.textContent='width '+window.innerWidth;}show();window.addEventListener('resize',show);</script></body></html>

▶ Open the interactive comic issue

‹ Form Events · Submit · Change · Input Timing · SetTimeout · SetInterval · ClearTimeout ›