HTML DOM 로딩 함수
- DOM 로드 함수
자바스크립트를 활용한 DOM 조작 시 가장 먼저 염두에 둬야 할 부분은 각 엘리먼트들의 로드 여부를 알아내는 것입니다.
만약 엘리먼트가 로드되지 않은 상태에서 접근을 시도 하면 에러가 발생하기 때문입니다.
또한, 엘리먼트들의 로드 여부를 알아내기 위해서 아래와 같은 방법들이 존재하며, 그 방법들을 실행 순서로 나열하였습니다.
1. defer: 페이지 파싱이 완료된 다음 해당 스크립트를 실행합니다. (IE 6+ 전용)
2. DOMContentLoaded: DOM 요소의 로딩이 완료되면 발생합니다. 단, 이미지가 로드되기 전에 실행됩니다. (IE 미지원)
3. onreadystatechange: 아래와 같이 객체 상태(readyState)가 변경될 때 발생합니다.((IE6+, Opera 지원) readyState는 모든 브라우저가 반환)
- 3 - 1. uninitialized: 객체 데이터로 초기화되지 않았다.
- 3 - 2. loading: 객체 데이터가 로딩되고 있다.
- 3 - 3. interactive: 객체 데이터가 완전히 로딩되지 않았어도 사용자가 객체에 접근할 수 있다.
- 3 - 4. loaded: 객체 데이터 로딩이 완료되었다.
- 3 - 5. complete: 객체 초기화가 완료되었다.
4. onload: 문서의 로딩이 완료 되었을 때 발생합니다. (페이지 로딩 순서 중 가장 마지막에 위치합니다.)
아래는 위에서 언급된 속성(defer)과 이벤트(DOMContentLoaded || onreadystatechange || onload)들을 활용하여
페이지 DOM 로드 여부를 알아낸 후 매개변수로 정의된 callback 함수를 호출하는 예제소스 입니다.
- 예제소스 IE 테스트 결과
defer:
onreadystatechange:
onload:
예제소스 크롬 테스트 결과
defer(크롬 브라우저는 defer 속성을 지원하지 않기 때문에 null을 반환합니다):
DOMContentLoaded:
onload:
테스트 결과:
IE: defer --> onreadystatechange --> onload
Chrome: defer(미지원) --> DOMContentLoaded --> onload
참고사이트:
@Pain님 블로그
