JavaScript DOM 준비

1. DOM이 준비되면 jQuery ready()함수를 사용하여 함수 호출
2. DOM이 준비되었을 때 함수를 호출하기위한 Vanilla JavaScript 접근 방식

웹 사이트 로딩은 HTML 문서 다운로드부터 시작됩니다. HTML 문서가 다운로드되면 HTML이 구문 분석되고 필요한 자산이 다운로드됩니다. HTML이 파싱 된 후 DOM과 CSS가 병렬로 렌더링됩니다. 그 후 브라우저는 JavaScript onload기능을 처리합니다. 이것은 HTML, CSS, DOM이 올바르게 렌더링되기 때문에 우리가 함수를 호출하려는 시간 프레임입니다. 이 튜토리얼에서는 DOM이 준비되었을 때 함수를 호출하는 방법을 설명합니다.

DOM이 준비되면 jQuery ready()함수를 사용하여 함수 호출

jQuery의ready()함수는 DOM이 준비되면 코드를 실행합니다. 모든 요소가 완전히로드 될 때까지 기다린 다음 액세스 및 조작을 시도합니다. document요소, 빈 요소를 선택하여 함수를 호출하거나 직접 함수를 호출 할 수도 있습니다.

$(document).ready(function() {
  // callback function / handler
});

완전한 브라우저 간 호환 메서드이며 HTML 코드의 어느 곳에서나 호출 할 수 있습니다.

DOM이 준비되었을 때 함수를 호출하기위한 Vanilla JavaScript 접근 방식

DOMContentLoaded이벤트를 사용하여 jQuery의ready()함수에 해당하는 JavaScript를 만들 수 있습니다. DOMContentLoaded에 대한 이벤트 리스너를 추가하고 해당 이벤트 리스너로 원하는 함수를 호출 할 수 있습니다. 그러나 하나의 캐치가 있으며 이벤트가 이미 발생한 경우 콜백이 트리거되지 않습니다. 따라서 우리는 문서 객체의 준비 상태를 확인하여이 조건을 처리합니다.

const callback = function() {};

if (document.readyState === 'complete' ||
    document.readyState === 'interactive') {
  setTimeout(callback, 1);
} else {
  document.addEventListener('DOMContentLoaded', callback);
}

이 문제를 해결하는 데 도움이되는 이러한 방법 외에 몇 가지 트릭이 있지만 모든 경우에 이상적이지는 않습니다.

• 창의onload속성을 사용하여 JavaScript 함수를 호출합니다.
• 본문의onload속성을 사용하여 JavaScript 함수를 호출합니다. 이 메서드는 모든 단일 요소가로드 될 때까지 대기하므로 매우 느릴 수 있습니다.
• 본문 끝에서 실행할 함수를 호출 할 수 있습니다. 본문 끝에 DOM이 적절하게 렌더링되고 준비됩니다. 따라서 모든 요소와 관련된 함수 호출에는 문제가 없습니다. 이미지가 완전히로드 될 때까지 기다리지 않기 때문에 본문onload핸들러보다 훨씬 빠르게 작동합니다.