$(document).ready()와 $(window).load()

$(document).ready()

외부 리소스

이미지와 상관 없이 브라우저거 DOM(document object model) 트리를 생성한 직후 실행

window.load() 보다 더 빠르게 실행되고 중복 사용하여 실행해도 선언한 순서대로 실행됨

 

 

$(window).load() 

DOM의 standard 이벤트html의 로딩이 끝난 후에 시작화면에 필요한 모든 요소(css, js, image, iframe등)들이 웹 브라우저 메모리에 모두 올려진 다음에 실행됨

 

 

실행 순서 비교

<script>
$(window).load(function() {
	console.log("window.onload() 첫 번째");
});
$(window).load(function() {
	console.log("window.onload() 두 번째");
});
$(document).ready(function() {
	console.log("document.ready() 첫 번째");
});
$(document).ready(function() {
	console.log("document.ready() 두 번째");
});
</script>

 

✔ 출력 결과

document.ready() 첫 번째

document.ready() 두 번째

window.onload() 첫 번째

window.onload() 두 번째