웹페이지 로딩 화면 만들기

---

Main question

웹페이지가 외부 리소스(이미지, 비디오 등)를 읽어들이기 전까지는 로딩 화면을,

모든 리소스를 읽어들인 후 준비가 되었을 때 페이지를 보이게 하려면?

---

 

Question 1.
모든 리소스를 읽었는지 여부를 어떻게 알 수 있을까?

 

 

우선 웹 브라우저의 자바스크립트 실행 순서에 대해 알아보자.

 

 

• 웹 브라우저의 자바스크립트 실행 순서 

 

렌더링 엔진은 다음의 순서로 HTML 코드를 실행한다

 

✅ Window 객체 생성 (웹 페이지와 탭마다 생성)

✅ Window 객체의 프로퍼티로 Document 객체 생성, DOM 트리 구축 시작

     - document.readyState = "loading"

✅ HTML 문서 순서에 따라 분석하여 DOM 트리 구축

     -  중간에 script 요소가 있으면 HTML 문서 분석을 멈추고 script 실행, 실행 완료 후 분석 재개

✅ HTML 문서 분석 끝

     - document.readyState = "interactive"

     - Document 객체에 DOMContentLoaded 이벤트 발생

✅ 외부 리소스 읽어들이기 시작

✅ 외부 리소스 읽기 완료

     - document.readyState = "complete"

     - Window 객체에 load 이벤트 발생

✅ 이벤트 수신

 

 

따라서 모든 리소스를 읽었는지 여부는

1) document.readyState="complete"으로 바뀌는 것,

2) window 객체에 load 이벤트가 발생되는 것으로 알 수 있다.

 

 

 

Solution

📌 script 코드에 다음과 같은 event listener을 추가한다

 

1) document.readyState="complete" 감지

document.addEventListener('readystatechange', event => {
  if (event.target.readyState === 'interactive') {
    initLoader();
  }
  else if (event.target.readyState === 'complete') {
    initApp();
  }
});

readyState의 변화를 감지하는 event listener 이며,

readyState="interactive" 일 때(HTML 구문 분석은 완료) loader를,

readyState="complete" 일 때(외부 리소스 읽어들이기 완료) 페이지를 보여주는 함수를 등록한다

document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    initApplication();
  }
}

위와 같이 사용할 수도 있다

 

 

2) window의 load 이벤트 감지

window.addEventListener('load', (event) => {
  console.log('page is fully loaded');
});

window.onload = function() {
  init();
  doSomethingElse();
};

---

 

Question 2. 
CSS 스타일링 하는 법

 

 

로딩 중일 때는 loader 요소가 보이게,

로딩이 끝났을 때는 페이지 구성 요소가 보이게 해야 한다.

 

 

Solution

📌 CSS 코드에 요소를 보이지 않게 하는 스타일을 추가 (visibility:hidden 또는 display:none)

외부 리소스 읽어들이기가 끝나고 실행되는 함수를 통해,

 1) loader에 해당 스타일 적용

 2) 페이지 구성 요소에 해당 스타일 적용 해제

 

 

 

Step by Step

✅ CSS에 다음과 같은 class를 만든다

 

.hidden {

    visibility:hidden !important;

}

위 hidden을 class로 갖고 있는 요소는 보이지 않게 된다

 

✳ visibility: hidden vs. display: none

- visiblity: hidden은 자리는 차지하되 보이지 않게 하는 것이고,

- display: none은 아예 document에 없는 것처럼(자리 차지도  X) 하는 것

 

 

HTML 코드에서

mainTitle (페이지 구성 요소)의 class에 hidden이 있어야 하고 (class="hidden")

loader에는 없어야 한다

 

 

✅ 외부 리소스 읽어들인 후 실행되는 함수에 다음과 같은 코드를 추가한다

 

function loadComplete(){

   

    mainLoader.classList.add("hidden");   

    mainTitle.classList.remove("hidden");

 

}

 

 

끝.

loader의 경우 구글에 CSS loader examples를 검색하면 예시가 많이 나와있으니,

참고하면 좋을 것이다

 

 

 

 

참고 문헌

모던 자바스크립트 입문, 이소 히로시 지음

 https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState#readystatechange_as_event_listener_to_insert_or_modify_the_dom_before_domcontentloaded

Document.readyState - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Window: load event - Web APIs | MDN