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를 실행한다고 하네요..


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


+
핀란디아 님께서 12일 전에 자바스크립트 카테고리에 올린 질문

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

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를 실행한다고 하네요..


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


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

1개의 답변

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

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


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

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

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

+
kimho 님께서 12일 전에 자바스크립트 카테고리에 올린 글
조회수 29
답글 1