<head> <script>
/*
예제 03: DOMContentLoaded 이벤트와 load 이벤트의 차이점
*/
$(document).ready(function() {
document.write("width = "+ $("#target").width());
});
</script>
</head>
<body>
<img src="./images/logo_01.jpg" id="target">
</body>
위와 같은 소스가 있습니다.
책에 이렇게 나와 있는데요..
"DOMContentLoaded 이벤트는 웹브라우저가 웹페이지를 읽은 후 태그와 1:1로
맵핑되는 DOM객체를 생성한 후 발생합니다. 여기서 주의할 점이 있는데요.
이 이벤트가 발생한 시점에는 이미지나 플래시같은 무거운 콘텐츠는 아직 로드되지
않았다는 점입니다."
이렇게 내용이 있습니다.
일단 위 소스를 실행하면
width = 0 이렇게 나옵니다. 그리고 다시 페이지를 새로고침하면 width=430 이라고
이미지의 사이즈가 나옵니다.
제가 알기로는 $(document).ready(function(){a}); 이 것은
a를 실행하기 전에, 웹페이지를 다 읽을 동안 대기하고 있다가,,,웹페이지가 준비가 되면 ,,즉, 웹페이지를 다 읽으면..a를 실행하는 구문인데요.
맞는지요? -.=;;
그렇다면, 웹페이지를 다 읽었다는 것은(ready()라는 것은) 위 페이지의 모든 html(body,,,등등)을
모두 다 읽었다는 의미입니다.
그런데도, width = 0 이렇게 첨에 나오는 이유는,,,
웹페이지내의 모든 html을 "일단" 다 읽었으며, 해당 html문서내의 모든 태그에 대해서 각각의
DOM객체를 다 생성했다.
하지만, html문서에 있는 이미지는 ,,물론 img태그를 다 읽었고, 해당 DOM객체도 다 만들어놓긴했지만,,진작 이미지는 아직 서버로부터 다운받은 상태가 아니라서,
해당 이미지의 가로/세로 사이즈는 일단 아직은 모른다.
그래서, 해당 위치에 이미지가 있다는 것은 알고 있지만,
그 이미지가 아직 다운이 완료가 된 상태가 아니라서, 그 이미지가 포함한 자세한 속성(size)까지는 아직 모를수밖에 없다.
그래서, 일단 width는 0 으로 해놓은 것이다..
물론, 아무리 초고속 인터넷을 사용하지만,
무거운 이미지가 아니라, 비교적 가벼운 이미지라해도,,
브라우저가 hmtl문서를 읽은 후 나타내는 속도가,,
이미지가 다운되는 속도보다 더 빠르기 때문에 이런 오차가 발생하는 것이다.
만일, 서버에서 이미지를 다운하는 속도가,,,브라우저가 html문서를 다 읽은 후
나타내려고 하는 속도보다 빠르다면,
width = 430 이라고 첨부터 나온다..
이렇게 해석하는 맞는 해석인가요? -.=;;;
그래서, 이렇게 다운이 오래 걸리는 큰 이미지의 경우에
웹페이지가 나오자마자 width = 430 과 같이 나오게 하려면
그 경우에는
window.onload=function() {a} <<<== 이 구문을 사용하라고 하네요..
즉, 위 구문은 웹페이지내의 html뿐만 아니라,,삽입된 컨텐츠까지도 전부 다운로드가 끝난 지점에서 a를 실행한다고 하네요..
저의 생각이 맞는지,,확인을 좀 부탁드립니다. -.=;;;
지금까지 올리신 질문 중에 가장 간단하게 답변을 드릴 수 있겠네요.
생각하시는 원리가 맞습니다^^
$(document).ready()는 document 객체에 대해서 완료 상태를 체크하기 때문에 DOM이 완료된 상태에서 실행되는 것이구요,
window.load는 window 객체에 대해 완료 상태를 체크하기 때문에 모든 프레임이나 객체나 이미지가 모두 로딩이 완료된 상태에서 실행되는 것입니다.