< Code diaries />

웹문서 로딩 상태 실시간으로 체크하기 - document.readyState 본문

Javascript-DOM/04 - Event

웹문서 로딩 상태 실시간으로 체크하기 - document.readyState

ejey 2024. 9. 18. 19:36

 

 

 

 

function stateCheck(e) {
	let status = e.target.readyState;
    let msg = '';
    switch (status) {
    	case 'loading':
        msg = '웹문서 로딩중';
        break;
        
        case 'interactive' :
        msg = '웹문서 로딩완료, 리소스 로딩중';
        break;
        
        case 'complete' :
        msg = '모든 리소스 로딩 완료'
        break;
        
        default :
        msg = '상태를 체크할 수 없습니다.'
    
    }
    
    console.log(`now : ${msg}`)

}
document.addEventListener('readystatechange', stateCheck );

 

 

 

https://developer.mozilla.org/ko/docs/Web/API/Document/readyState

 

Document.readyState - Web API | MDN

Document.readyState 속성을 통해 document의 로딩 상태를 확인할 수 있다.

developer.mozilla.org

 

https://developer.mozilla.org/ko/docs/Web/API/Document/readystatechange_event

 

Document: readystatechange event - Web API | MDN

readystatechange 이벤트는 현재 페이지의 readyState 속성값이 변할 때 발생한다.

developer.mozilla.org

 

반응형
저작자표시 비영리 변경금지

'Javascript-DOM > 04 - Event' 카테고리의 다른 글

Event 종류 정리  (0) 2024.09.18
'Javascript-DOM/04 - Event' Related Articles more