DOMContentLoaded, load, onload, loadeddata, onloadeddata

JavaScript

by 폴리프레임 2024. 7. 22. 07:13

addEventListener() 메소드를 이용하는 트리거로서 load 와 DOMContentLoaded는 같은 용도로 쓰이지만, 다음의 차이가 있습니다.

- DOMContentLoaded : DOM 트리만 로드된 시점에 발생하며, 스타일시트, 이미지, 서브프레임 등의 리소스는 로드될 필요가 없습니다.
- load : 페이지의 모든 리소스가 완전히 로드된 후에 발생합니다.

// DOMContentLoaded 이벤트 - DOM 만
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM fully loaded and parsed');
});

// load 이벤트 - css 등 페이지 관련 모든 것 load
window.addEventListener('load', function() {
    console.log('Page is fully loaded');
});

한편 loaddata 는 HTMLMediaElement 로서 미디어파일 로드에 사용합니다.

const video = document.querySelector("video");

video.addEventListener("loadeddata", (event) => {
  console.log(
    "Yay! The readyState just increased to  " +
      "HAVE_CURRENT_DATA or greater for the first time.",
  );
});

onload , onloadeddata 는 메소드가 아니고, 프로퍼티 형태로 이용합니다.

window.onload = function() {
    console.log('Page is fully loaded');
};

const video = document.querySelector("video");

video.onloadeddata = (event) => {
  console.log(
    "Yay! The readyState just increased to  " +
      "HAVE_CURRENT_DATA or greater for the first time.",
  );
};

onload, onloadeddata 는 DOM, 즉 인라인에서도 사용을 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline onload Example</title>
</head>
<body>
    <h1>Image Load Example</h1>
    <img src="path/to/image.jpg" onload="imageLoaded()" alt="Sample Image">
    <script>
        function imageLoaded() {
            console.log('Image is fully loaded');
        }
    </script>
</body>
</html>

저작자표시 비영리 변경금지 (새창열림)

'JavaScript' 카테고리의 다른 글

window - 웹 브라우저 최 상위 객체 (1)	2024.07.24
let 과 var 의 차이 - window 속성에서 차이 중요 (1)	2024.07.24
scripts 유닉스 -> 윈도우 (0)	2024.07.16
json() 과 JSON.parse() (2)	2024.07.05
forEach() - advanced (1)	2024.07.05