티스토리 뷰

web

window.onload 와 $(document).ready()의 차이

tonirr 2020. 2. 8. 16:14

1. window.onload

 1) 호출 시점

    - 페이지의 모든 요소들이 로드된 이후에 호출

 2) 특징

    - 페이지의 모든 요소들이 로드되어야 호출된다.

    - 한 페이지에서 하나의 window.onload()함수만 적용된다.

    - 가장 나중에 호출된 함수만 적용

 

2. $(document).ready()

 1) 호출 시점

    - DOM이 로드된 시점

 2) 특징

    - 외부 리소스 및 이미지 로딩과 상관없이 DOM만 로드되면 바로 실행된다.

    - 중복 사용해도 순서대로 모두 실행된다.

 

 

  • window.onload = function(){}

    • javascript에서 페이지가 로드 되면 자동으로 실행되는 전역 콜백함수

    • 웹페이지(DOM 데이터)가 로딩이 끝나는 시점에 실행되는 함수를 지정

    • 문서가 다 읽어지고 난후 실행시킬 자바스크립트 코드를 넣어주면 됨

    • 페이지 안의 이미지나 외부 파일이 로드 될 때까지 기다린 후 실행되어 로딩시간이 길어질 수 있음

    • body태그 안에 들어가지 않는이상 body onload가 먼저뜨고 window.onload가 뜨지 않음

    • <body onload = "">로 사용할 수도 있음

      • 두개가 다있으면 마지막 <body onload=""> 만 뜨는 이유임

  • $(document).ready(){}

    • $(function(){});과 같음

    • window.onload와 비슷한 역할로 사용되지만 순서는 window.onload가 더 느림

    • DOM 생성됨 -> $(document).ready(function(){}); -> 이미지를 포함한 요소들이 로드 -> window.onload

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<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>

호출순서

 

'web' 카테고리의 다른 글

[WEB] Web server 와 WAS  (0) 2020.07.21
[WEB] 동적으로 table 등에 append하기  (0) 2020.07.12
[WEB] <c:choose><c:when><c:otherwise>사용  (0) 2020.07.12
[Web] 웹 컨테이너 구조  (0) 2020.03.27
[Web] 웹프로그래밍 용어  (0) 2020.03.26
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함