자동 실행 함수 (window.onload, $(document).ready())

요약

window.onload 와 $(document).ready() 중에 어느 한 쪽이 좋다고 할 수 없다.

window.onload 는 페이지의 모든 요소들이 로드된 이후에 호출되며

$(document).ready() 는 DOM 요소들만 로드되면 호출된다.

window.onload 는 한 페이지에 하나의 함수만 호출되지만

$(document).ready() 는 모두 호출된다.

위와 같은 특징들을 파악하여 경우에 따라 적절히 골라서 쓰자.

---

window.onload

Javascript에서 페이지가 로드되면 자동으로 실행되는 함수를 구현할 때엔

전역 콜백함수인 window.onload 함수를 사용합니다.

※ 자바스크립트 전역 콜백함수: http://zuyo.tistory.com/337

실행시점

페이지가 모두 로드된 시점

특징

1. 페이지의 모든 요소들이 로드되어야 호출된다. 

2. 한 페이지에서 하나의 window.onload()함수만 적용된다.

사용법

아래와 같이 익명함수 형태로 사용한다.

window.onload = function () {
}

---

$(document).ready()

jQuery는 자바스크립트의 window.onload 함수의 문제점을 해결하기 위해 $(document).ready() 함수를 제공한다.

실행시점

DOM이 모두 로드된 시점

특징

1. 외부 리소스 및 이미지 로딩과 상관없이 DOM만 로드되면 바로 실행된다.

2. 중복 사용해도 순서대로 모두 실행된다.

사용법

$(document).ready(function(){
});

or 생략하면..

$().ready(function(){
});

or 더 생략하면..

$(function(){
});

---

1. $(document).ready()

- 외부 리소스. 이미지와는 상관 없이 브라우저가 DOM (document object model) 트리를 생성한 직후 실행

- window.load() 보다 더 빠르게 실행되고 중복 사용하여 실행해도 선언한 순서대로 실행됨

2. $(window).load()

- DOM의 standard 이벤트

- html의 로딩이 끝난 후에 시작

- 화면에 필요한 모든 요소(css, js, image, iframe etc..)들이 웹 브라우저 메모리에 모두 올려진 다음에 실행됨

- 화면이 모두 그려진 다음의 메세징이나 이미지가 관련 요소가 모두 올려진 다음의 애니메이션에 적합함

- 전체 페이지의 모든 외부 리소스와 이미지가 브러우저에 불려운 이후 작동하게 되어 이미지가 안뜨너가 딜레이가 생길 때에는 그만큼의 시간을 기다려야 함

- 외부 링크나 파일 인크루트시 그 안에 window.load 스크립트가 있으면 둘 중 하나만 적용됨

- body onload 이벤트와 같이 body에서 onload 이벤트를 쓰게 되면 모든 window.load() 가 실행되지 않는 현상이 발생함

* window > document

- document는 window의 자식 객체 (window의 자식 객체 : document, self, navigator, screen, forms, history, location etc..)

- document : html의 요소들이나 속성들에 접근할 시 사용하는 객체

출처: https://diaryofgreen.tistory.com/96 [vida valiente]