$(function () {}) 및 $(window).on('load', function() {})의 차이

페이지를 읽을 때 처리를 실행하고 싶은 경우 다양한 쓰기 방법이 있습니다.
이 부근의 차이를 총결하였다.

유형

jQuery의ready와 js에는 예로부터 애용된 onload가 있습니다.

ready

$(function(){
    alert('Hello');
});

//または
$(document).ready(function() {
    alert('Hello');
});

//または
jQuery(function() {
    alert('Hello');
});

//または
jQuery(document).ready(function(){
    alert('Hello');
});

//JavaScript
document.addEventListener('DOMContentLoaded', function(){
    alert('Hello');
}, false);

jQuery의 작법은 생략된 것이기 때문에 어떤 작법을 써도 마찬가지입니다.

load

$(window).on('load',function(){
    alert('Hello');
});

//または
$(window).load(function(){
    alert('Hello');
});

//JavaScript
window.onload = function(){
    alert('Hello');
}

언제 실행

ready

DOM 트리 구축이 완료되면 수행됩니다.

load

이미지, 애니메이션 등 관련 데이터의 모든 읽기가 끝난 후에 실행됩니다.

그러니까

ready는 이미지 등을 표시하기 전에 실행하고load는 이미지 등을 표시한 후에 실행합니다.
그럼 언제 어느 것을 쓰는 것이 좋을까요?

[ready]

html 또는 ex 표시 여부 제어) 라디오 단추를 선택하면 디스플레이 등

창 크기에 따라 ex가 결정됨) 부드럽게 굴러가는 내용의 위치 취득 등(상황에 따라rezsize 이벤트도 필요함)

읽는 시간을 숨기는 애니메이션 등

[load]

이미지 크기를 얻거나 이미지 크기에 따라 변경할 수 있습니다

페이지를 옮길 때 애니메이션을 표시합니다(특히 스마트폰이ready일 경우 페이지를 표시할 때 이미 끝났습니다...)

이런 느낌인가요?

다중 실행

여러 가지 묘사를 할 때, 대부분의 경우 특별히 신경 쓸 필요가 없다.
모두 집행하다.
단, 아래 내용만 실행하고 마지막으로 기술한 내용만 실행합니다.

window.onload = function(){
    alert('javascript1');
}

window.onload = function(){
    alert('javascript2');
}

window.onload = function(){
    alert('javascript3');
}

javascript3만 표시됩니다.

시원시원하다

아래와 같은 상황에서 어떤 순서로 표시합니까?

$(window).on('load',function(){
    alert('jq_on_load1');
});

window.onload = function(){
    alert('js_onload1');
}

$(function(){
    alert('jq_ready1');
});

document.addEventListener('DOMContentLoaded', function(){
    alert('js_ready1');
}, false);

$(window).load(function(){
    alert('jq_load1');
});

$(window).load(function(){
    alert('jq_load2');
});

$(window).on('load',function(){
    alert('jq_on_load2');
});

window.onload = function(){
    alert('js_onload2');
}

$(function(){
    alert('jq_ready2');
});

document.addEventListener('DOMContentLoaded', function(){
    alert('js_ready2');
}, false);

다음 순서로 표시됩니다.
텍스트 표시
jq_ready1
jq_ready2
js_ready1
js_ready2
이미지 표시
jq_on_load1
jq_load1
jq_load2
jq_on_load2
js_onload2
※ js_onload1이 표시되지 않습니다.

경품

DOM 트리란 무엇입니까?

DOM(Document ObjectModel)은 프로그램에서 HTML 문서 또는 XML 문서를 활용하는 데 사용되는 API입니다.
DOM은 HTML 문서 또는 XML 문서를 객체의 트리 컬렉션으로 처리합니다.
그것을'DOM 트리'라고 합니다.
DOM 트리의 각 객체를 노드라고 합니다.
JavaScript에서는 이 DOM을 사용하여 페이지를 다시 읽지 않고 페이지의 일부를 덮어쓰거나 스타일을 변경할 수 있습니다.
이 사이트에서는 DOM 트리를 시각화할 수 있습니다.
domtree