Knowledge Map

window.onload 본문

WEB/JAVASCRIPT

window.onload

2017. 3. 22. 15:38

window.onload는 html, css, javascript 파일등이 전부 로딩이 되었을때는 감지하는 이벤트 메서드이다.

보통은 script 파일을 html 파일 제일 아래에 위치시켜서 했기 때문에 그렇게 신경쓰지 않는 메서드였는데 이번에 사용할 일이 생기게 되었다.







// 모든 로딩이 끝난 뒤 작동
window.onload = function(){}
 
// DOM 로딩이 끝난 후 
document.onload = function(){}
cs


회사에서 Gulp를 사용하고 있는데, 순서에 상관없이 JS 폴더내에 있는 모든 JS 파일들을 가져와서 합치고 최소화를 시켰다.

그런데 서로간의 의존성이 존재하기 때문에 순서가 필요했는데, 그럴때에는 어떻게 해야하는지 물어보았었다.


그것에 대해서 2가지 답변을 들을수 있었는데


1. 순서를 지켜야 하는 파일들을 폴더에 나누어서 하거나 아니면 배열로 순서를 지정해서 Gulp로 실행시킨다.

2. 일단 함수, 메서드, 모듈들을 다 읽어드린 다음에 실행을 모든 모듈들이 전부다 로딩된 이후에 작동하면 된다.


모든 코드들이 실행되기 전에 제각각 순서 없더라도 제각각 다 로딩이 된 상황이라면 실행을 해도 무방할 것이기 때문에 2번과 같은 방법도 있는 거 같았다.

하지만 이렇게 하려면 모든 파일들이 로딩이 되어야 하므로 이럴때에는 window.onload = function(){} 를 사용한다고 한다.


다만 onload라는 이벤트 핸들러의 경우, window인지, document인지에 따라서 작동하는 시기가 다르니 그 부분을 기억할 필요가 있다.

Comments