Computer Science

js LifeCycle

In JavaScript, lifecycle events are events that the browser triggers at certain stages of a web page's loading process, from the beginning until it closes.

loading

The browser parses the HTML line by line. The entire DOM isn't ready yet.

DOMContentLoaded

DOM ready. The HTML is fully parsed, allowing you to access all elements. But images, CSS, or iframes may still be loading. This is the most commonly used "start event." 

                        document.addEventListener("DOMContentLoaded", () => {
    console.log("DOM ready!");
});

load

Page fully loaded. All images, CSS, scripts, and iframes have been loaded. It will run later. 

                        window.addEventListener("load", () => {
    console.log("Sayfa tamamen yüklendi!");
});

User Interaction Process

Events such as click, scroll, resize, input work at this stage. 

                        <!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>loading örneği</title>
</head>
<body>
  <h1>ReadyState Testi</h1>

  <script>
    document.addEventListener("readystatechange", () => {
      console.log("Durum:", document.readyState);

      if (document.readyState === "loading") {
        console.log("HTML yükleniyor...");
      }

      if (document.readyState === "interactive") {
        console.log("DOM hazır (DOMContentLoaded).");
      }

      if (document.readyState === "complete") {
        console.log("Her şey (resimler, css) yüklendi.");
      }
    });
  </script>
</body>
</html>