Jquery $(document).ready() 와 $(window).load()의 차이점 본문
Jquery $(document).ready() 와 $(window).load()의 차이점
Publee 2019. 2. 27. 11:12$(document).ready vs $(window).load() & $(window).on('load') vs body.onload
$(document).ready() 는
외부 리소스, 이미지와는 상관없이 브라우저가 DOM(document Object Model) 을 생성한 직후에 실행
$(window).load() 보다 더 빠르게 실행되고 중복 사용하여 실행해도 선언한 순서대로 실행됩니다.
$(window).load() 또는 $(window).on('load')
DOM(Document Object Model) 의 Standard 이벤트 입니다.
HTML의 로딩이 끝난 후 실행 되고, 화면에 필요한 모든 요소 (image, css, javascript 등)들이 웹 브라우저 메모리에 모두 올려진 다음에 실행됩니다. 이미지의 경우엔 로드가 실패되었을 경우에도 포함입니다.
전체 페이지의 모든 외부 리소스와 이미지가 브라우저에 불려진 후 작동하게 되어 이미지가 안뜨거나 딜레이가 생길 때에는 그만큼의 시간이 딜레이 된 후 실행됩니다.
실행 순서를 비교해 보겠습니다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(window).load(function () {
console.log(1, 'window.onload');
});
$(window).load(function () {
console.log(2, 'window.onload');
});
$(window).on('load', function () {
console.log(3, 'window.onload');
})
$(document).ready(function () {
console.log(1, 'document.ready');
});
$(document).ready(function () {
console.log(2, 'document.ready');
});
</script>
콘솔창에서 $(document).ready 가 먼저 실행되고 그 다음 $(window).load() 또는 $(window).on('load') 가 실행되는 것을 확인할 수 있습니다.
이제는 $(document).ready() 와 $(window).load() 와 body onload 이벤트를 비교해보겠습니다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body onload="console.log('body onload')">
<script>
$(window).load(function () {
console.log(1, 'window.load');
});
$(window).load(function () {
console.log(2, 'window.load');
});
$(window).on('load', function () {
console.log(3, 'window.load');
})
$(document).ready(function () {
console.log(1, 'document.ready');
});
$(document).ready(function () {
console.log(2, 'document.ready');
});
</script>
</body>
$(document).ready 가 먼저 실행되고, 그다음엔 body.onload 가 먼저 실행된다음 스크립트 부분에 $(window).load 부분들이 순서대로 실행되는 것을 확인 할 수 있었습니다.
다른 버전으로 한번 다시 보면
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(window).load(function() {
console.log(1, 'window.load');
});
$(window).load(function() {
console.log(2, 'window.load');
});
$(window).on('load', function () {
console.log(3, 'window.load');
})
$(document).ready(function() {
console.log(1, 'document.ready');
});
$(document).ready(function() {
console.log(2, 'document.ready');
});
</script>
<body onload="console.log('body onload')">
</body>
다름없이 $(document).ready 가 먼저 실행되고, 그다음에 <script></script> 태그안에 있
$(window).load 가 실행된 뒤 body.onload 가 실행되는 것을 확인 할 수 있었습니다.
이제 $(window).load 와 body.onload 를 비교해보겠습니다.
<script>
$(window).load(function () {
console.log(1, 'window.load')
});
$(window).on('load', function () {
console.log(2, 'window.load')
});
</script>
<body onload="console.log('body onload')">
</body>
body.onload 는 Jquery CDN 없이 실행이 가능한걸로 나오지만, $(window).load 는 안되는 걸로 확인 됩니다.
'STUDY > Javascript N Jquery' 카테고리의 다른 글
| 여러개 요소에 여러개 이벤트 바인딩 하기 (0) | 2019.03.05 |
|---|---|
| 인수와 매개변수란? (0) | 2019.02.28 |
| 2 TYPE의 Prototype (0) | 2019.02.28 |
| Scope n Closures (0) | 2019.02.26 |
| var vs let vs const 의 차이점 (0) | 2019.02.26 |