페이지가 로드될 때까지 JavaScript 대기

1. 이벤트 리스너를 사용하여 JavaScript에서 페이지가 로드될 때까지 대기
2. window.onload 이벤트를 사용하여 JavaScript에서 페이지가 로드될 때까지 대기

오늘의 게시물은 JavaScript에서 페이지가 완전히 로드될 때까지 기다리는 방법에 대해 설명합니다.

이벤트 리스너를 사용하여 JavaScript에서 페이지가 로드될 때까지 대기

EventTarget 인터페이스의 addEventListener() 메서드는 지정된 이벤트가 대상에 전달될 때마다 호출되는 함수를 구성합니다.

addEventListener() 메서드는 EventListener를 구현하는 함수 또는 개체를 호출되는 EventTarget에 지정된 이벤트 유형에 대한 이벤트 리스너 목록에 추가하여 작동합니다.

함수 또는 개체가 해당 대상에 대한 이벤트 리스너 목록에 이미 있는 경우 함수 또는 개체가 두 번 추가되지 않습니다.

EventTarget 인터페이스의 removeEventListener() 메소드는 EventTarget.addEventListener()를 사용하여 대상에서 이전에 등록된 이벤트 리스너를 제거합니다.

아래 예를 살펴보겠습니다.

<div>
  <p>
    Welcome to wait for page load blog post.
  </p>
</div>

window.addEventListener(
    'load', () => {alert('Hello World.This page is loaded!')});

위 예제에서는 이벤트 리스너 함수가 윈도우에 등록되어 있습니다. 이 이벤트 리스너는 페이지가 로드되었음을 사용자에게 알리기 전에 페이지가 완전히 로드될 때까지 기다립니다.

브라우저에서 다음 코드를 실행해 보십시오. 다음 결과가 표시됩니다.

출력:

window.onload 이벤트를 사용하여 JavaScript에서 페이지가 로드될 때까지 대기

GlobalEventHandlers 믹스인의 onload 속성은 window, XMLHttpRequest, img 요소 등에서 로드 이벤트를 처리하는 이벤트 핸들러입니다.

로드 이벤트는 특정 리소스가 로드되면 트리거됩니다.

로드 이벤트는 문서 로드 프로세스가 끝날 때 트리거됩니다. 문서의 모든 개체는 DOM에 있으며 모든 이미지, 스크립트, 링크 및 하위 프레임이 완전히 로드되었습니다.

두 솔루션의 유일한 차이점은 최신 브라우저에서 window.onload가 뒤로/앞으로 기록 버튼을 사용할 때 window.onload를 실행하지 않는다는 것입니다. 반대로 리스너는 매번 해고됩니다.

<div>
  <p>
    Welcome to wait for page load blog post.
  </p>
</div>

window.onload = function() {
  console.log('Hola!.This page is loaded!')
};

출력:

"Hola!.This page is loaded!"

데모