1. $(document).ready()
- 외부 리소스. 이미지와는 상관 없이 브라우저가 DOM (document object model) 트리를 생성한 직후 실행
- window.load() 보다 더 빠르게 실행되고 중복 사용하여 실행해도 선언한 순서대로 실행됨
2. $(window).load()
- DOM의 standard 이벤트
- html의 로딩이 끝난 후에 시작
- 화면에 필요한 모든 요소(css, js, image, iframe etc..)들이 웹 브라우저 메모리에 모두 올려진 다음에 실행됨
- 화면이 모두 그려진 다음의 메세징이나 이미지가 관련 요소가 모두 올려진 다음의 애니메이션에 적합함
- 전체 페이지의 모든 외부 리소스와 이미지가 브러우저에 불려운 이후 작동하게 되어 이미지가 안뜨너가 딜레이가 생길 때에는 그만큼의 시간을 기다려야 함
- 외부 링크나 파일 인크루트시 그 안에 window.load 스크립트가 있으면 둘 중 하나만 적용됨
- body onload 이벤트와 같이 body에서 onload 이벤트를 쓰게 되면 모든 window.load() 가 실행되지 않는 현상이 발생함
* window > document
- document는 window의 자식 객체
(window의 자식 객체 : document, self, navigator, screen, forms, history, location etc..)
- document : html의 요소들이나 속성들에 접근할 시 사용하는 객체
3. 실행 순서 비교
|
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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(window).load(function() {
console.log("console> window.onloade() 첫번째");
});
$(window).load(function() {
console.log("console> window.onload() 두번째");
});
$(document).ready(function() {
console.log("console> document.ready() 첫번째");
});
$(document).ready(function() {
console.log("console> document.ready() 두번째");
});
</script>
</head>
<body>
</body>
</html> |
cs |
콘솔창에서 document.ready가 먼저 실행되고 그 다음에 window.load가 실행되는 것을 확인할 수 있다.
4. document.ready() vs window.load() vs body onload 이벤트 비교
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(window).load(function() {
console.log("console> window.load()");
});
$(document).ready(function() {
console.log("console> document.ready()");
});
</script>
</head>
<body onload="console.log('console> body onload...');">
</body>
</html> |
cs |
document.ready() > window.load() > body onload 이벤트 순서대로 실행되는 것을 확인할 수 있다.
* window.load() vs body onload 차이
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
<script>
$(window).load(function() {
console.log("console> window.load()");
});
</script>
</head>
<body onload="console.log('console> body onload...');">
</body>
</html> |
cs |
window.load()는 jquery CDN을 import 해줘야 사용할 수 있는 반면, body onload 이벤트는 jquery CDN을 import 해주지 않아도 사용할 수 있다.
* $(function() 대신 $(document).ready() 를 권장하는 이유
$(function() 을 쓰나 $(document).ready() 를 쓰나 같은 함수임에는 틀림이 없으나
$(window).load() 함수와 확실하게 구분지어주기 위해 $(document).ready() 를 사용하는 것을 권장한다.
'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글
| jQuery :: Highcharts (차트/그래프 구현) (0) | 2017.09.21 |
|---|---|
| jQuery:: 제이쿼리를 이용한 테이블 동적 rowspan / colspan (0) | 2017.08.01 |
| Jquery :: text() vs html() 차이 (0) | 2016.10.03 |
| JavaScript :: 배열 정렬하기(문자열 배열, 숫자 배열) (0) | 2016.10.03 |
| JavaScript :: 정규 표현식 (0) | 2016.08.21 |