1
답변 1 jQuery에서 ready()와 window.onload = function()의 차이점에 대해서 궁금합니다. 답변 1 1 (/p/javascript)
/* 예제 03: DOMContentLoaded 이벤트와 load 이벤트의 차이점 */ $(document).ready(function() { ..
    <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를 실행한다고 하네요..


저의 생각이 맞는지,,확인을 좀 부탁드립니다. -.=;;;


+
핀란디아 님께서 2개월 전에 자바스크립트에 올린 질문

jQuery에서 ready()와 window.onload = function()의 차이점에 대해서 궁금합니다.

1
답변 1 jQuery에서 ready()와 window.onload = function()의 차이점에 대해서 궁금합니다. 답변 1 1 (/p/javascript)
/* 예제 03: DOMContentLoaded 이벤트와 load 이벤트의 차이점 */ $(document).ready(function() { ..
    <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를 실행한다고 하네요..


저의 생각이 맞는지,,확인을 좀 부탁드립니다. -.=;;;


+
핀란디아 님께서 2개월 전에 자바스크립트에 올린 질문
0
 
핀란디아 2개월 전
아. 보다 더 구체적으로 자세히 설명을 해주셔서 깊은 감사를 드립니다. 미세먼지가 많은 오늘, 건강유의하세요.^^

1개의 답변

2
[답변]jQuery에서 ready()와 window.onload = function()의 차이점에 대해서 궁금합니다. (/p/javascript)
지금까지 올리신 질문 중에 가장 간단하게 답변을 드릴 수 있겠네요.생각하시는 원리가 맞습니다^^$(document).ready()는 document 객체에 대해서 완료 상태를..

지금까지 올리신 질문 중에 가장 간단하게 답변을 드릴 수 있겠네요.


생각하시는 원리가 맞습니다^^

$(document).ready()는 document 객체에 대해서 완료 상태를 체크하기 때문에 DOM이 완료된 상태에서 실행되는 것이구요,

window.load는 window 객체에 대해 완료 상태를 체크하기 때문에 모든 프레임이나 객체나 이미지가 모두 로딩이 완료된 상태에서 실행되는 것입니다.

사탕 주기
+
kimho 님께서 2개월 전에 자바스크립트에 올린 글
조회수 93
답글 1
URL