ready() 함수와 onload() 함수는 모두 JavaScript의 이벤트 핸들러 중 하나로, 문서가 로드되었을 때 특정 작업을 수행할 수 있다. 하지만 이 두 함수는 목적과 작동 방식에 있어서 차이가 있다.
ready 함수
ready() 함수는 jQuery 라이브러리에서 제공하는 함수로, 문서 객체 모델(DOM)의 로드가 완료될 때 발생하는 이벤트인 DOMContentLoaded를 감지하여 처리하는 함수다.
즉, HTML 문서를 완전히 다운로드하고 파싱된 후, DOM 구조가 완성되었을 때 실행된다.
$(document).ready(function() {
// 실행될 코드
});또는
$(function() {
// 실행될 코드
});와 같이 사용할 수 있다.
위의 코드에서 $는 jQuery 객체를 의미하며, $(document)는 문서 객체 모델을 의미한다.
ready() 함수는 이벤트 핸들러로, 함수 내부에 실행할 코드를 작성하면 된다.
ready() 함수는 문서 로딩이 완료되어 모든 HTML 요소가 브라우저에 로드된 후에 실행되기 때문에, 문서의 DOM 구조를 수정하거나 조작하는 등의 작업에 적합하다.
예제
$(document).ready(function() {
alert("문서가 로드되었습니다!");
});
onload 함수
onload() 함수는 HTML 문서의 모든 자원이 로드되었을 때 실행되는 이벤트 핸들러다.
이 함수는 문서의 모든 요소(이미지, 스타일시트 등)가 로드되어야 실행된다.
window.onload = function() {
// 실행될 코드
};위의 코드에서 window는 전역 객체를 의미하며, onload는 이벤트 핸들러로, 함수 내부에 실행할 코드를 작성하면 된다.
onload() 함수는 문서의 모든 자원이 로드된 후에 실행되기 때문에, 이미지나 비디오 등을 로딩하는 작업에 적합하다.
예제
window.onload = function() {
alert("문서의 모든 자원이 로드되었습니다!");
};
차이점
두 함수의 가장 큰 차이점은 실행 시점입니다. ready() 함수는 HTML 문서의 DOM 구조가 완성된 이후에 실행되지만, onload() 함수는 HTML 문서에 포함된 모든 자원이 로드된 후에 실행됩니다. 이러한 차이점으로 인해, ready() 함수는 HTML 문서의 DOM 구조를 수정하는 작업에, onload() 함수는 이미지나 비디오와 같은 자원을 로딩하는 작업에 적합합니다.
또한, ready() 함수는 window.onload 이벤트보다 더 빠르게 실행됩니다. 따라서, ready() 함수는 문서 로딩 시간을 단축시키기 위해 사용될 수 있습니다.
어떤 타이밍에 함수를 배치해야 하는지 잘 확인하고 적절히 배치하여 사용하도록 하자
<!DOCTYPE html>
<html>
<head>
<title>ready() vs onload()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// ready() 함수 사용
$(document).ready(function() {
console.log("ready() 함수 실행");
});
// onload() 함수 사용
window.onload = function() {
console.log("onload() 함수 실행");
};
</script>
</head>
<body>
<p>HTML 문서의 내용</p>
</body>
</html>2023.05.09 - [DEV] - [JAVASCRIPT] switch ~ case 조건문에 대하여 + 예제
[JAVASCRIPT] switch ~ case 조건문에 대하여 + 예제
switch 문은 주어진 변수 또는 식의 값에 따라 여러 가지 상황을 구분하여 각각에 맞는 코드를 실행하는 조건문이다. if 문과 유사하지만, switch 문은 보다 복잡한 상황에서 코드를 간결하게 작성할
iknowandyouknow.tistory.com
'DEV' 카테고리의 다른 글
| [기타] JAVA vs C++ TCP 통신 차이 (0) | 2023.05.12 |
|---|---|
| [JAVASCRIPT] switch ~ case 조건문에 대하여 + 예제 (0) | 2023.05.09 |
| [ORACLE] 두 개의 값 비교 BETWEEN 함수 사용하기 (0) | 2023.05.09 |
| [JAVASCRIPT] 현재날짜 구하기 (0) | 2023.05.08 |
| [기타] tar 압축하기 / 압축해제 (0) | 2023.04.27 |
