2. $(ducument).ready()와 $(window).onload()

⌨️ 요즘 html과 스프링을 통해서 웹개발 실습을 하고 있다. 그러는 중 자주 사용하지만 사용할 때 마다 찾아쓰는 document ready에 대해서 한 번 정리하는게 좋을 거 같아 포스팅을 하게 되었다.  

 

 

DOM 객체가 생성되는 시점에서 실행  - $(document).ready(function(){});

DOM

Document Object Model - 문서 객체 모델 → 모든 HTML 요소의 속성, 메서드, 이벤트

- 문서는 HTML, XML과 같은 것들을 문서라고 하고

- 이러한 문서를 구조적으로 표현하는 방식을 제공하는 것을 DOM이라고 한다. 

 

 

출처 : https://www.w3schools.com/js/js_htmldom.asp

 

▼DOM 생성 시 바로 호출되어 실행된다. 

첫번째, 흔히 사용하는 방식, 사용된 이벤트로 JQuery 3.0 이후에서는 사용하지 않는 것을 권장 

$(document).ready(function(){

});

 

두번째, 줄여서 사용하는 방식, 많이 사용!!!! 

$(function(){

});

 

 

 

모든 리소스들이 로드가 완료되면 실행 - window.onload

DOM 생성 후 이미지 등의 리소스 호출까지 완료된 후에 실행된다. 그래서 이미지나 지도 API 같은 정보가 정상 호출된 후 스크립트가 실행되길 원하면 사용할 수 있다. 

$(window).load(function(){

};