웹개발을 하다 보면 onload함수를 자주쓰게 됩니다. 이때 보통 사용하는게 일반적으로 window.onload를 쓰게 되는데
요놈이 가끔씩 문제를 일으키게 되죠.
예를 들어 window.onload같은 경우 전체 페이지의 모든 외부리소스와 이미지가 브라우저에 불리워진 이후에 작동을 하게 되어 이미지가 안뜨거나 딜레이가 생길때는 그 만큼의 시간을 기다려야 하는 문제가 있습니다.
또한 외부 링크나 파일을 인클루드 했을때 그 안에 window.onload 스크립트가 또 존재하면 둘중에 하나만 적용이 되는 불행한 사태가 벌어집니다.
더 복잡하게는 <body onload="javascript:gogogo();" >와 같이 body에서 onload를 쓰면 모든 window.onload가 실행되지 않는 이상한 일이 나타나죠..
<script type="text/javascript">
window.onload = function() {
// 페이지 완전 로딩후 실행
alert("로딩 완료");
// 이후 프로세스 실행
..
}
</script>
<script type="text/javascript">
window.onload = function() {
// 실행 안됨
alert("AAA");
}
window.onload = function() {
// 요놈만 실행됨
alert("BBB");
}
</script>
<script type="text/javascript">
window.onload = function() {
// 실행안됨
alert("AAA");
}
function gogogo() {
// 요놈만 실행됨
alert("BBB");
}
</script>
<body onload="javascript:gogogo();">
... 생략
이런 문제를 해결하기 위해서인지 jQuery에서는 $(document).ready() 함수를 제공합니다.
이 함수의 경우 외부 리소스 및 이미지와는 상관없이 DOM데이터만 로드가 완료되면 바로 실행이 되는 함수입니다.
따라서 window.onload보다 더 빠르게 실행이 된다는 얘기죠..
또한 중복해서 사용을 해도 그 순서대로 모두 실행이 됩니다. 또하나의 jQuery 사용 이유가 생긴셈이죠?
<script type="text/javascript">
window.onload=function() {
alert("ccc");
}
$(document).ready(function() {
alert("aaa");
});
$(document).ready(function() {
alert("bbb");
}
</script>
동작순서는 aaa->bbb->ccc 순서로 나타나게 됩니다.
'[HTML & CSS & JavaScript] > Javascript&JQuery' 카테고리의 다른 글
| [자바 스크립트] 자바스크립트 팝업창에 el태그 값 넘기기 (0) | 2020.01.30 |
|---|---|
| [제이쿼리] 이미지 배열 구하기 (0) | 2020.01.28 |
| [자바스크립트] 로그인 후 글쓰기 기능(javascript에 jstl 변수 입력) (0) | 2019.12.29 |
| [자바스크립트] 아이디 중복 체크 만들기(스크립트에서 JSTL 사용하기) (0) | 2019.12.26 |
| [JAVA Script 개념] onclick을 사용하여 sciprt를 사용하자 (0) | 2019.12.09 |