FEDev Story

[스크랩] Jquery :: document.ready() vs window.load() 차이 본문

Web.Dev

[스크랩] Jquery :: document.ready() vs window.load() 차이

지구별72 2018. 8. 3. 15:42

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 이벤트 비교

document.ready() > window.load() > body onload 이벤트 순서대로 실행되는 것을 확인할 수 있다.



출처: http://diaryofgreen.tistory.com/96 [vida valiente]

'Web.Dev' 카테고리의 다른 글

[스크랩] contentEditable 속성으로 인라인 텍스트 편집기 제작하기  (0) 2018.08.03
[자바스크립트] 에디터 만들기(document.execCommand())  (0) 2018.08.03
[스크랩] Geolocation API(GPS)  (0) 2018.03.13
브라우저 동작과정  (0) 2018.01.21
[스크랩] front-end 개발자 인터뷰 문제 - javascript 영역  (0) 2016.03.24
'Web.Dev' Related Articles more
Comments