👉 Window.onload() vs $(document).ready()
$(document).ready()와 window.onload()는 비슷한 role을 수행하지만, 실행 시점은 window.onload()가 더 느리다.
DOM 생성됨 => $(document).ready(); => 외부 리소스(이미지, CSS, JS 등) 로드 => window.onload()
| Window.onload() | 호출 시점 : 페이지의 모든 요소 (이미지, CSS, JS 등)들이 로드된 이후에 호출 특징 1) 한 페이지에서 하나의 window.onload() 함수 적용 특징 2) 가장 나중에 호출된 함수만 적용됨 특징 3) 일반 DOM 객체에도 사용 가능하다. 특징 4) JQuery에 load() 라는 함수가 같은 역할을 한다. |
| $(document).ready() | 호출 시점 : DOM이 로드된 시점 특징 1) : 외부 리소스(이미지, CSS)와 상관없이 DOM 로드완료시 바로 실행 특징 2) : 중복 사용해도 순서대로 모두 실행된다. 특징 3) : JS의 window.addEventListener('DOMContentLoaded', function(){}) 와 같은 역할 |
👉 코드 및 결과
HTML 코드
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function(){console.log("window.onload 1");}
window.onload = function(){console.log("window.onload 2");}
$(document).ready(function(){console.log("document.ready 1")});
$(document).ready(function(){console.log("document.ready 2")});
</script>
</body>
</html>
'HTML, CSS, JS' 카테고리의 다른 글
| [Javascript] 유용한 Library 정리 (0) | 2022.07.09 |
|---|---|
| [JavaScript] HTML Collection.length 0이라고 뜨는 에러 (0) | 2022.07.01 |
| [HTML, CSS] Loading Bar - Animation 예제 (0) | 2022.06.12 |
| [HTML, CSS] 별점, 평점 시스템 예시 (0) | 2022.06.12 |
| [HTML] 검색되는 Dropdown Input Bar (0) | 2022.06.12 |