HTML, CSS, JS

[JavaScript, JQuery] Window.onload() vs $(document).ready()

yubi5050 2022. 6. 15. 14:40

👉 Window.onload() vs $(document).ready()

$(document).ready()와 window.onload()는 비슷한 role을 수행하지만, 실행 시점은 window.onload()가 더 느리다.
DOM 생성됨 => $(document).ready(); => 외부 리소스(이미지, CSS, JS 등) 로드 => window.onload()

Window.onload() 호출 시점 : 페이지의 모든 요소 (이미지, CSS, JS 등)들이 로드된 이후에 호출
특징 1) 한 페이지에서 하나의 window.onload() 함수 적용
특징 2) 가장 나중에 호출된 함수만 적용됨
특징 3) 일반 DOM 객체에도 사용 가능하다.
특징 4) JQuery에 load() 라는 함수가 같은 역할을 한다.
$(document).ready() 호출 시점 : DOM이 로드된 시점
특징 1) : 외부 리소스(이미지, CSS)와 상관없이 DOM 로드완료시 바로 실행
특징 2) : 중복 사용해도 순서대로 모두 실행된다.
특징 3) : JS의 window.addEventListener('DOMContentLoaded', function(){}) 와 같은 역할

 

👉 코드 및 결과

HTML 코드

<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    </head>
<body>
    <script type="text/javascript">
        window.onload = function(){console.log("window.onload 1");}
        window.onload = function(){console.log("window.onload 2");} 
        $(document).ready(function(){console.log("document.ready 1")});
        $(document).ready(function(){console.log("document.ready 2")});
    </script>
</body>
</html>

실행 결과