코딩이 즐겁다

[jQuery] $(document).ready() vs window.onload 차이 갓벽 가이드 본문

Jquery

[jQuery] $(document).ready() vs window.onload 차이 갓벽 가이드

코즐 2025. 3. 10. 12:00
반응형

 

 

$(document).ready() vs window.onload 차이점

구분 $(document).ready() window.onload
실행 시점 DOM(Document Object Model)이 완전히 로드되면 실행 페이지의 모든 리소스(HTML, CSS, 이미지, 스크립트 등)가 모두 로드된 후 실행
속도 빠름 (HTML만 로드되면 실행) 상대적으로 느림 (이미지, 스타일시트 등 모든 요소 로드 후 실행)
사용 예시 DOM 조작, 이벤트 바인딩 전체 페이지 로드 후 실행해야 하는 작업 (예: 모든 이미지 로딩 후 실행)

 

 

실행 순서 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            console.log("$(document).ready() 실행!");
        });

        window.onload = function() {
            console.log("window.onload 실행!");
        };
    </script>
</head>
<body>
    <h1>Hello, jQuery!</h1>
    <img src="https://tistory1.daumcdn.net/tistory/7291623/attach/d3600c083a6348eabb7e915ef051fa8e" alt="이미지 로드 테스트">
</body>
</html>

🎯 실행 결과:

이벤트 실행 순서
이벤트 실행 순서

 

$(document).ready()가 먼저 실행되고, 이후 이미지까지 모두 로드된 후 window.onload가 실행되는 걸 확인할 수 있습니다.

 

 

$(document).ready() vs window.onload 실행 흐름 비교

웹 페이지 로딩 과정

  1. HTML 파일이 다운로드됨.
  2. 브라우저가 HTML을 해석하며 DOM을 생성함.
  3. $(document).ready() 실행
  4. CSS, 이미지, 외부 스크립트 파일 로딩이 완료됨.
  5. window.onload 실행! (모든 요소가 로드된 후 실행)

 

 

언제 사용해야 할까?

상황 $(document).ready() window.onload
DOM 조작이 필요할 때 사용 (HTML만 로드되면 실행 가능) 불필요하게 느림
이미지 크기 조절 후 조작할 때 이미지가 아직 로드되지 않을 수 있음 모든 이미지 로드 후 실행 가능
전체 리소스 로드 후 실행할 때 필요 없음 사용 (예: 로딩 화면 제거)
버튼 클릭 이벤트 등록할 때 사용 불필요하게 늦음

💡 window.onload가 더 적합한 경우

✅ 모든 이미지가 로드된 이후에 크기 조정할 때:

window.onload = function() {
    let img = document.getElementById("myImage");
    console.log("이미지 너비:", img.width);
};

window.onload는 모든 이미지가 로드된 후 실행되므로 이미지 크기를 정확하게 측정할 수 있습니다. 반면, $(document).ready()를 사용하면 이미지가 아직 로드되지 않았을 수도 있어서 예상과 다른 크기가 나올 수 있습니다.

 

💡 $(document).ready()가 더 적합한 경우

✅ 버튼 클릭 이벤트 등록할 때:

$(document).ready(function() {
    $("#btn").click(function() {
        alert("버튼 클릭!");
    });
});

$(document).ready()는 DOM이 준비되면 바로 실행되므로, 버튼 이벤트 등록을 빠르게 할 수 있습니다. 반면, window.onload를 사용하면 불필요하게 늦게 실행될 수 있습니다.

 

사용 TIP

  • 일반적으로 DOM 조작이 필요한 경우 $(document).ready()를 사용하면 됩니다.
  • 이미지 크기 조정 같은 작업이 필요하다면 window.onload를 사용하는 게 좋습니다.

 

반응형
저작자표시 비영리 변경금지

'Jquery' 카테고리의 다른 글

[jQuery] $(document).ready() 개념과 사용법 갓벽 가이드  (15) 2025.03.10
[jQuery] 마우스 더블 클릭 이벤트의 모든 것 갓벽 가이드  (18) 2025.03.09
[jQuery] click 이벤트 활용의 모든 것 갓벽 가이드  (19) 2025.03.08
jquery 란, 제이쿼리 사용 방법 갓벽 가이드  (55) 2025.02.27
'Jquery' Related Articles more