문서의 로드시점 - onload, $(window).load();

2020. 1. 15. 17:17

웹문서를 만드는 경우, 문서가 로드되었을때를 기점으로 문서를 초기화하고, 각종 설정을 부여하는 것은 빈번한 일입니다. 이 시점에 접근하기 위해 사용되는 이벤트들에 대하여 알아봅니다.

일반적으로, 스크립트를 문서의 마지막(</body>) 이전에 삽입하면 굳이 이벤트를 이용하여 프로그래밍을 처리할 필요가 없다. 다만, 문서의 <head> 영역에 스크립트가 삽입되거나 외부의 파일에 정의되어 있다면 이벤트를 연결하여 문서의 로드시점에 맞게 처리해야 한다.

onload

문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트이다(load 이벤트라고들 한다).

window.onload = function() { 
	//실행될 코드 
}

문서에 포함된 모든 콘텐츠가 로드된 후에 실행되기에 불필요한 로딩시간이 추가될 수 있다.
동일한 문서에 오직 onload는 하나만 존재해야 한다.
- 중복될 경우, 마지막 선언이 실행된다.
- 외부 라이브러리에서 이미 선언된 경우 이를 찾아 하나로 합치는 과정이 필요하다.
외부의 자원(iframe, image, script)을 사용하는 경우에도 해당된다.

<body> 요소에 속성(attribute)으로 지정될 수 있다.

<body onload="실행될 코드">

위와 같이 사용된 경우, window.onload로 지정된 것은 무시된다.

window 객체뿐만 아니라 원하는 객체(object)가 로드되었을때 실행될 코드를 설정할 수 있다.

document.getElementById("myFrame").onload = function() { 
	//실행될 코드 
}

이벤트를 직접 연결할 수도 있다.

window.addEventListener('load', function(){
	//실행될 코드
});

jQuery load

jQuery에서는 onload와 같은 동작을 하는 load 메소드를 제공한다.

$(window).load( function() { 
	//실행될 코드 
})

DOMContentLoaded

HTML과 script가 로드된 시점에 발생하는 이벤트이다.

onload 이벤트보다 먼저 발생한다. 빠른 실행속도가 필요할때 적합하다.
IE8 이하에서는 지원하지 않는다.

window.addEventListener('DOMContentLoaded', function(){ 
	//실행될 코드 
})

jQuery ready

자바스크립트의 DOM 트리가 준비되었을때의 시점을 컨트롤하는 메소드로 DOMContentLoaded의 jQuery 버전이라 생각하자.

onload 이벤트보다 먼저 발생한다. 즉, 문서의 모든 자원이 다운로드되었을때 발생하는 onload와 달리 DOM 트리만 완성되면 바로 발생하므로 빠른 실행속도가 필요할때 적합하다.
여러번 사용되면 선언 순서에 따라 순차적으로 실행된다.

$(document).ready(function(){ 
	//실행될 코드 
});

출처: https://webdir.tistory.com/515 [WEBDIR]

조금 오래된 자료 이긴 하지만. 참고 해 주세요~

페이지 로딩시 시작할 스크립트 선언에 대해 <body onload=""> 의 onload를 많이
사용해 보았을 것입니다.
그리고 모든 페이지에서 공통으로 들어갈 스크립트는 페이지 마다 작성을 하지 않고,
js 파일을 만들어 연결을 하여 사용을 할 것입니다.
여기서 그럼 모든 페이지에서 load시 공통으로 실행될 스크립트는 어떻게 작업을 할까요??

window.onload를 사용 하면 됩니다.

window.onload = function(){ 시작시 실행될 내용 }

이런식으로 말이죠.

그런데 문제는 window.onload와 는 동시에 사용을 할 수 없습니다.
<body onload="">가 실행이 되면 window.onload는 실행이 되지 않는 문제가 있습니다.

그래서 이를 해결하고자 할때 사용하는 것이
window::onload()입니다.

function window::onload(){ 시작시 실행될 내용 }

이렇게 사용을 하면 됩니다.
실행 순서는 <body onload="">가 먼저 실행되고, 이어서 window::onload()가 실행됩니다

출처: http://whitecoke.tistory.com/14

window.onload 에서 .js파일 사용시 주의점

..
<head>
<script type="text/javascript"  src="makePopUp.js"></script>
</head>
<body>
..

이처럼 body가 구성 되기 전에 js 파일을 읽어오게 된다.

makePopUp.js 속에 alert( document.getElementsByTagName("DIV") ); 이 있다면 ' 0 ' 을 출력하는 경우가 종종 발생한다.

원인은 바로 !!!

body의 내용을 읽기 전에 js파일 속의 function을 먼저 실행하기 때문이다.

해결방법은

1. body이후에 js파일을 임포트 하던지,

2. 아래와 같이 load 시점을 늦추는 방법을 사용하여야 한다.

addLoadEvent(funLoad);

function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != 'function'){
    	window.onload = func;
	}else{
		window.onload = function(){
			oldonload();
			func();
        };
    } 
}

function funLoad(){
	//  하고자 하는 내용
}

출처 : http://bg_ellder.blog.me/91917054

저작자표시 비영리

'프론트엔드 개발 놀이터 > Javascript' 카테고리의 다른 글

자바스크립트 Promise 쉽게 이해하기 (0)	2020.01.17
javascript fetch 를 이용한 ajax 통신 및 주의점 (0)	2020.01.16
바닐라스크립트에서 selector 사용법 (0)	2020.01.15
바닐라스크립트에서 이벤트 리스너 - $().on("click",..); (0)	2020.01.15
URL 이동하기 (0)	2020.01.14

내나라(nenara.com)