728x90
반응형
[jQuery] $(document).ready()와 $(function(){})
두 소스는 같은 역할을 한다.
외부 리소스, 이미지와는 상관 없이 브라우저가 DOM(Document Object Model) 트리를 생성한 직후에 실행된다.
따라서 $(document).ready()는 리소스들이 로드되기 전에 동작할 수 있다.
window.onload 보다 더 빠르게 실행되며, 중복으로 사용하여 실행할 수 있고, 선언 순서대로 실행된다.
.ready() 이벤트는 jQuery 3.0 이후부터는 사용하지 않는 것을 권장한다.
권장 방법
$(function(){
// do something
});
[Vanila Javascript] window.onload
DOM 생성 후 바로 호출되는 ready와 다르게, window.onload는 DOM 생성 후 리소스 호출까지 완료된 이후에 실행된다.
즉, 화면에 필요한 모든 요소(css, js, image, iframe .. )들이 웹 브라우저 메모리에 모두 올려진 다음 실행된다.
window.onload 사용시 주의해야 할 부분이 있다.
<body onload="">를 쓰게 되면 window.onload()는 실행되지 않는다.
동시에 사용하려면 window.onload()를 사용하면 <body onload="">가 먼저 실행되고 실행된다.
* document는 window의 자식 객체이다.
window.onload = function() {
// do something
}
정리
$(document).ready()
- 호출 시점
- 리소스 로딩과 상관 없이 DOM이 로드된 시점 (DOM 트리 생성 직후)
- window.onload보다 빠르게 실행 됨
- 특징
- 여러 번 선언해도 순서대로 실행 된다.
window.onload
- 호출 시점
- 화면에 필요한 모든 요소 (css, js, 이미지 등)들이 로드된 이후
- 특징
- 여러 번 선언하면 처음 선언한 window.onload만 선언된다.
- 외부 링크나 파일을 include할 경우 동일 스크립트가 있을 경우 둘 중 하나만 적용된다.
320x100
반응형
'Devlog > JavaScript' 카테고리의 다른 글
| [JavaScript] Image Lazy Loading과 Intersection Observer API (0) | 2022.08.10 |
|---|---|
| [JavaScript] Scroll Event 최적화 (3) | 2022.08.04 |
| [JavaScript] script의 속성 async와 defer (0) | 2022.07.12 |
| [JavaScript] Promise 알아보기 (0) | 2022.06.29 |
| [JavaScript] Slick Slider 모바일 스크롤 시 autoplay 멈춤 현상 (0) | 2022.06.09 |