반응형

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의 요소들이나 속성들에 접근할 시 사용하는 객체

 

<!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>
반응형
반응형

 window.onload vs $(document).ready()

 

Two syntaxes can be used for this:

$( document ).ready(function() {
   console.log( "ready!" );
});

Or the shorthand version:

$(function() {
   console.log( "ready!" );
});

주요 사항 $(document).ready():

  • 이미지가 로드될 때까지 기다리지 않습니다.
  • DOM이 완전히 로드되었을 때 JavaScript를 실행하는 데 사용됩니다. 여기에 이벤트 핸들러를 넣습니다.
  • 여러 번 사용할 수 있습니다.
  • 교체 $로 jQuery당신이받을 때 "$가 정의되지 않았습니다."
  • 이미지를 조작하려는 경우에는 사용되지 않습니다. $(window).load()대신 사용하십시오 .

window.onload()기본 JavaScript 함수입니다. window.onload()는 DOM (문서 객체 모델), 배너 광고 및 이미지를 포함하여 페이지의 모든 내용이로드 이벤트가 발생합니다. 둘의 또 다른 차이점 $(document).ready()은 하나 이상의 onload기능을 가질 수 있지만 하나의 기능 만 가질 수 있다는 것 입니다.

 

https://stackoverflow.com/questions/3698200/window-onload-vs-document-ready

 

window.onload vs $(document).ready()

What are the differences between JavaScript's window.onload and jQuery's $(document).ready() method?

stackoverflow.com

 

반응형
반응형
jQuery에서 어떤게 먼제 실행되는지에 대해서 궁금한데.

$(document).ready 는 DOM 이 준비가 되면 바로 실행을 한다.

$(window).load 는 페이지 내의 모든 데이터(요소)가 다 준비가 되어야 실행한다.

그 차이를 알아채기는 쉽지 않겠지만. 그렇다고 한다.

그런데, 실제 경험상 그 차이는 크게 느낄수 없었다.

이 둘의 차이를 따지게 되는 상황에서 중요한 점은 페이지가 얼마나 빨리 Load 되느냐지
실행이 어느순간에 되는건 고려되지 않았기 때문이다.
이론에 대한 얘기이며, 실기에선 고려되지 않았었다는 사설.

그래도, $(document).ready를 쓰는 것이 일반적인 상황에서는 맞는거 같다.
이미지로 뭔가를 하려는게 아니라면.
이미지 요소로 뭔가를 하려 한다면, $(window).load 를 써야하지 않을까?
반응형

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] Navigator  (0) 2012.04.30
node.js 외 js 관련  (0) 2012.03.26
HTML5 Web Workers  (0) 2012.02.21
20+ Must See Fresh and Useful jQuery Plugins from 2011  (0) 2011.12.09
5 Awesome Responsive jQuery Sliders and Image Galleries  (0) 2011.12.09

+ Recent posts