[Event] observe 에서의 onload와 dom:loaded 의 차이

기본적으로 대부분의 스크립터는 "페이지가 모두 로드 되었다." 라는 전제는

이미지를 포함한 모든 리소스가 로드완료 (즉 하단 상태표시줄에 완료 라고 찍히는 타이밍)을 페이지가 로드 되었다 라고 인식한다.

하지만 실제로(물론 위의 설명이 가장 적합하지만) 스크립트가 실행되는데는 모든 리소스를 전제로 기능을 추가하지만 그렇지 않아야 하는 경우도 있다. 즉. dom만 있으면 되는 경우이다.

(대표적으로 CSS가 그렇다. 이미지도 하나의 엘리먼트로 인식하라. src에 있는 이미지가 다운로드 되는것과 img 엘리먼트가 dom로드되는것은 틀린이야기이다.) 

prototype에서는 이에 대해서 서로 다른 이벤트로드를 지원하는데. 

Event.observe(window,"load",handler)
Event.observe(document,"dom:loaded",handler)

이다.

 

1. 웹페이지의 모든 리소스까지 로드상태

Event.observe(window,"load",handler) 

웹페이지의 모든 리소스를 로드한 상태를 말한다. 이미지 및 플래쉬까지 로드된 상태이다.간혹가다 플래쉬 경로가 맞지 않아서 로드되지 않고 지연되는 경우에는 위의 이벤트는 그 지연이 끝날때까지 기다리게 된다. 

2. 웹페이지의 dom만 로드된상태.

Event.observe(document,"dom:loaded",handler) 

웹페이지의 모든 dom만 로드된 상태이다. body안에 있는 엘리먼트가 구성되었을때의 동작이다.여기에서는 css나 이미지의 다운로드 같은 상태는 포함되지 않는다.

[출처] [Event] observe 에서의 onload와 dom:loaded 의 차이.|작성자 디스타일