반응형
스크립트를 작성하다 보면 위에서부터 실행되다 보니 아직 DOM에 HTML이 호출되기 전이거나, 리소스가 호출되기 전에 스크립트가 실행되는 것을 방지하기 위해 ready()를 종종 보셨을 겁니다. $(document).ready()와 $(function(){}); 그리고 window.onload의 차이는 무엇인지 알아보겠습니다.
[jQuery] $(document).ready()와 $(function(){});
두 소스는 사실 상 같은 역할을 합니다.
DOM(Document Object Model) 객체가 생성되는 시점에 실행됩니다.
$를 봐서 아시겠지만 jQuery에서만 사용 가능합니다.
$(document).ready(function(){}); 에서 앞부분이 생략된 것이며,
.ready 이벤트는 사양될 이벤트로 jQuery 3.0 이후에서는 사용하지 않는 것을 권장합니다.
// 권장하는 방법
$(function(){
// script
});
[JS] window.onload와 차이
DOM 생성 후 바로 호출되는 ready와 달리
window.onload는 DOM 생성 후 리소스 호출까지 완료된 후에 실행됩니다.
또한, js기 때문에 javascript라면 사용 가능합니다.
이미지나 지도API과 같은 정보가 정상 호출된 후 스크립트가 실행되길 원하면 사용할 수 있습니다.
window.onload = function(){
// script
}
window.onload 사용상 주의
<body onload="">를 쓰게되면 window.onload()는 실행되지 않습니다.
동시에 사용하려면 window::onload()로 쓰게 되면 <body onload="">가 먼저 실행되고 실행됩니다.
그리드형
'IT > Web' 카테고리의 다른 글
| [JS] 여러개의 타이머/스톱워치 만들기 (setInterval 활용) (0) | 2022.07.14 |
|---|---|
| [Web] 웹브라우저에서 현재 내 쿠키 확인하기/쿠키 조회 방법 (1) | 2022.02.23 |
| [HTML] 모바일웹에서 전화걸기, 문자보내기, 메일보내기 (0) | 2021.12.04 |
| [CSS] 폰트 사이즈 px, em, rem 차이 (0) | 2021.11.29 |
| [JS] 유니코드 변환기(Unicode Converter). 자바스크립트 유니코드 변환 방법 (0) | 2021.11.28 |
댓글