1. [jQuery] window.load() vs document.ready()
$(document).ready()
ready는 DOM이 완성된 이후에 호출되는 함수이다.
$(document).ready(function(){ alert('READY'); });- onload 이벤트보다 먼저 발생한다. 즉, 문서의 모든 자원이 다운로드되었을때 발생하는 onload와 달리 DOM 트리만 완성되면 바로 발생하므로 빠른 실행속도가 필요할때 적합하다.
- 여러번 사용되면 선언 순서에 따라 순차적으로 실행된다.
$(window).load()
load 는 img와 같은 다른 요소(모든페이지 구성요소)가 모두 load된 이후에 호출되는 함수이다.
동일한 문서에 오직 onload는 하나만 존재해야 한다.
$(window).load(function(){ alert('LOAD'); });
<body onload="실행될 코드">
document.getElementById("myFrame").onload = function() { //실행될 코드 }
window.addEventListener('load', function(){ //실행될 코드 });
window.addEventListener('DOMContentLoaded', function(){ //실행될 코드 })window.load(), document.ready() 차이점
호출 시점의 차이 : 한 페이지에 두 함수가 다 있다면 실행 우선순위 (.ready() → .onload() 순으로 실행)
- .ready() 호출시점 : DOM Tree 생성 완료 후
- .onload() 호출시점 : 모든 페이지 구성요소 페인팅 완료 후
2. DOMContentLoaded event vs document load event
DOMContentLoaded 이벤트
초기 HTML 문서가 완전히 스타일 시트, 이미지를 기다리지 않고,로드 및 구문 분석되어 화재 및 서브 프레임로드를 완료한다.
document load 이벤트
전체 페이지가로드되면 이벤트는 같은 스타일 시트 및 이미지와 같은 모든 종속 리소스를 포함하여 발생합니다.
이는 DOMContentLoaded리소스가로드를 완료 할 때까지 기다리지 않고 페이지 DOM이로드 되 자마자 실행되는 것과 대조적 이다.
말에 힘이 있는 사람이 되기 위해 하루하루, 성장합니다.