$(document).ready() VS window.onload()
ready()함수는 DOMContentLoaded 함수를 포장한 메서드라고 할 수 있습니다. DOMContentLoaded 이벤트는 웹 브라우저가 웹 페이즈를 읽은 후 태그와 1:1 맵핑되는 DOM 객체를 생성한 후 발생합니다.
여기서 주의할 점은 이 이벤트가 발생한 시점에서는 이미지나 플래시 같은 무거운 콘텐츠는 아직 로드되지 않았다는 점입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOMContentLoaded</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(document).ready(function() { console.log("width : " + $("#target").width()); }); </script> </head> <body> <img src='./images/ktko.png' id='target' /> </body> </html> |
이해를 돕기 위해 예제를 추가 하였는데, 이미지 파일은 직접 구해서 경로를 맞춰야 합니다..ㅎ
실행해보면 ready()이미지 너비의 값은 0으로 출력됩니다. 말한대로 이미지가 로드되지 않았기 때문입니다. 다만 F5 또는 리플래쉬를 통해 다시 실행하면 너비가 나올 수 있는데(웹 브라우저 환경에 따라) 브라우저에 저장된 캐시된 이미지를 사용하기 때문에 정상적으로 출력되는 것처럼 보일 수 있습니다. 캐시를 지우고 다시 실행하면 0으로 나오는 것을 알 수있습니다.
이미지의 너비를 구하려면! window.load 이벤트를 사용해야 합니다. load 이벤트는 이미지나 플래시 같이 무거운 콘텐츠가 모두 로드되고 난 후 발생하는 이벤트입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOMContentLoaded</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> window.onload(function() { console.log("width : " + $("#target").width()); }); </script> </head> <body> <img src='./images/ktko.png' id='target' /> </body> </html> |
정 리
DOM이 사용할 준비가 된 경우 DOMContentLoaded 또는 ready() 이벤트가 먼저 발생하고 이후 이미지 등의 콘텐츠가 모두 로드되고 나서 load() 이벤트가 일어납니다.
따라서 무조건 jQuery의 ready() 메서드를 사용해서는 안되고, 상황에 따라 DOMContentLoaded 이벤트를 감싸고 있는 ready() 메서드를 사용할 수가 있고, load 이벤트를 사용할 수가 있습니다.
일반적으로 실무에서는 특별한 경우가 아니면 ready()를 사용합니다. 저는 JSP에서 jQuery로 화면을 개발하고 있는데 ready() 함수로 개발하고 있습니다.ㅎ
'jQuery' 카테고리의 다른 글
| jQuery 선택자 다루기 (0) | 2018.07.17 |
|---|---|
| jQuery 선택자(자식, 부모, 형제) (2) | 2018.07.17 |
| jQuery 선택자(ID, CLASS, TAG, 속성) (0) | 2018.07.16 |
| jQuery ready() 메서드 사용법 (0) | 2018.07.15 |
| jQuery $()의 의미 (0) | 2018.07.15 |
