투케이2K

43. (javascript/자바스크립트) window ready, window onload 구현 및 코드 차이점 설명 본문

JavaScript

43. (javascript/자바스크립트) window ready, window onload 구현 및 코드 차이점 설명

투케이2K 2021. 6. 9. 17:26

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <script>
    	/* 
    	[요약 설명]
    	1. document addEventListener : 특정 이벤트를 등록할 때 사용합니다    
    	2. window.ready : 브라우저가 DOM 트리를 생성한 직후 실행합니다
    	3. window.onload : html의 로딩이 끝난 후에 시작합니다 (이미지, 영상 등 모두 로드 완료 후 실행됨)
    	4. 웹 브라우저 동작 순서 : 
    		- 사용자 접속 (웹 브라우저 시작)
    		- 브라우저가 웹 문서 읽기 수행
    		- dom 생성 (window ready 수행)    	
    		- 웹 브라우저 이미지, 영상, css, js 등 요소들 로드 시작 
    		- 웹 브라우저 로딩 완료 및 화면이 모두 그려짐 (window onload 수행)
    	5. 참고 : 
    		- ready 는 onload 보다 빠른 시점에 수행되며, 중복 사용하여 실행하여도 선언한 순서대로 실행됩니다
    		- ready 부분에서 필요한 데이터 통신 수행을 시작합니다
    		- 브라우저에 많은 이미지, 영상, 파일이 포함되어 있을 경우 onload 이벤트는 딜레이 됩니다
    		- body 영역에서 <body onload="함수"> 지정 시 script 단에서 지정한 window onload는 무시됩니다
    		- window load 는 jQuery CDN을 import 해줘야 사용할 수 있지만, body onload 는 CDN을 import 해주지 않아도 사용 가능합니다    		
    	*/
    	
    	
    	/* dom 생성 및 이벤트 상시 대기 실시 */
    	document.addEventListener("DOMContentLoaded", ready);
    	function ready(){
    		console.log("window ready : start");    		
    	}
    	    	
    	
    	/* html 최초 로드 및 이벤트 상시 대기 실시 */
    	window.onload = function() {
    		console.log("window onload : start");
    	};  	    	    	
    	
    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[요약 설명]

1. document addEventListener : 특정 이벤트를 등록할 때 사용합니다

2. window.ready : 브라우저가 DOM 트리를 생성한 직후 실행합니다

3. window.onload : html의 로딩이 끝난 후에 시작합니다 (이미지, 영상 등 모두 로드 완료 후 실행됨)

4. 웹 브라우저 동작 순서 :

- 사용자 접속 (웹 브라우저 시작)

- 브라우저가 웹 문서 읽기 수행

- dom 생성 (window ready 수행)

- 웹 브라우저 이미지, 영상, css, js 등 요소들 로드 시작

- 웹 브라우저 로딩 완료 및 화면이 모두 그려짐 (window onload 수행)

5. 참고 :

- ready 는 onload 보다 빠른 시점에 수행되며, 중복 사용하여 실행하여도 선언한 순서대로 실행됩니다

- ready 부분에서 필요한 데이터 통신 수행을 시작합니다

- 브라우저에 많은 이미지, 영상, 파일이 포함되어 있을 경우 onload 이벤트는 딜레이 됩니다

- body 영역에서 <body onload="함수"> 지정 시 script 단에서 지정한 window onload는 무시됩니다

- window load 는 jQuery CDN을 import 해줘야 사용할 수 있지만, body onload 는 CDN을 import 해주지 않아도 사용 가능합니다

*/

/* =========================== */

반응형
저작자표시

'JavaScript' 카테고리의 다른 글

45. (javascript/자바스크립트) 쿼리 셀렉터 document querySelectorAll, querySelector 사용해 특정 태그 정보 확인 및 스타일 속성 변경  (0) 2021.06.10
44. (javascript/자바스크립트) childNodes 자식 노드, parentNode 부모 노드, nextSibling 형제 노드 정보 확인  (0) 2021.06.10
42. (javascript/자바스크립트) document childElementCount 자식 개수 확인 및 removeChild 자식 삭제 실시  (0) 2021.06.09
41. (javascript/자바스크립트) window onload 최초 로드 및 이벤트 상시 대기 수행, window onresize 실시간 브라우저 사이즈 변경 확인  (0) 2021.06.09
40. (javascript/자바스크립트) screen availWidth 화면 해상도 구하기 및 document body clientWidth 브라우저 body 크기 구하기  (0) 2021.06.09
'JavaScript' Related Articles more
Comments