이번 포스팅에서는 window.onload 와 $(document).ready 차이점에 대해 알아보겠습니다. 비슷한 용도로 사용 되고 있으므로 의미를 알고 사용하면 사소한 실수를 피할 수 있기때문에 각각의 특징을 눈에 익혀두시는 것을 추천드립니다.
window.onload 사용
호출 시점
- 페이지의 모든 요소들이 로드가 완료된 후 호출됩니다.
특이사항
- 페이지의 모든 요소가 로드되어야 호출 됩니다.
- 한 페이지 내에 하나의 window.onload() 함수만 적용됩니다.
- 여러 개를 사용했을 때는 가장 나중에 호출된 window.onload()만 적용됩니다.
- 문서가 모두 로딩된 후 실행시킬 자바스크립트를 넣어서 사용합니다.
- 인클루드를 포함한 모든 외부 요소가 로드될 때까지 기다린 후 실행되어 로딩시간이 길어질 수 있습니다.
- body태그 안에 body onload와 window.onload가 같이 있을 때는 body 태그의 onload만 실행됩니다.
$(document).ready() 사용
호출시점
- DOM이 로드된 시점
특이사항
- 외부리소스 및 이미지 로딩과는 별개로 DOM만 로드되면 실행됩니다.
- 중복하여 정의할 시 순서대로 실행됩니다.(가독성이 떨어져 권장하지는 않습니다.)
- window.onload와 비슷한 역할로 사용될 수 있지만 DOM로딩만 완료되면 실행되므로 window.onload보다 빨리 실행됩니다.
예제
<html lang="ko">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <!--제이쿼리 라이브러리 -->
<script>
var value = 1;
//제이쿼리
$(document).ready( function() {
$("#docu").text("문서가 전부 로드됐어요!" + value);
value += 1;
});
//자바스크립트
$(window).load( function() {
$("#wind").text("창이 모두 로드됐어요!" + value);
value += 1;
});
</script>
</head>
<body>
<p id="docu">제이쿼리</p>
<p id="wind">자바스크립트</p>
</body>
</html>
결과
문서가 전부 로드됐어요!1
창이 모두 로드됐어요!2
내용출처
https://soyeondev.tistory.com/30
https://choseongho93.tistory.com/213
반응형
'IT 개발' 카테고리의 다른 글
| [javascript] 현재시간 출력하기 (0) | 2023.02.02 |
|---|---|
| [HTML] 파비콘(favicon) 404 오류 해결 방법 (0) | 2023.02.01 |
| [javascript] javascript에서 $. (달러) 으로 시작하는것의 의미 (0) | 2023.01.30 |
| [javascript] Switch case 예제 및 사용방법 (0) | 2023.01.26 |
| [java]httpclient 사용해 request 요청하기 (0) | 2023.01.25 |
댓글