HOWTO · jQuery
jQuery의 Window.onload 대 $(document).ready
이 튜토리얼은 jQuery에서 Window.onload 및 $(document).ready 이벤트를 사용하는 방법을 보여줍니다.
이 페이지의 내용
onload는 onload 이벤트가 발생할 때 필요한 기능을 실행하는 데 사용되는 이벤트 핸들러이며 $(document).ready는 DOM document object model이 로드되었을 때 발생합니다. 이 튜토리얼은 jQuery에서 onload 및 ready() 메소드를 사용하는 방법을 보여줍니다.
JavaScript onload 이벤트
onload 기능은 개체가 리소스와 함께 완전히 로드될 때 작동합니다. 모든 리소스를 포함하여 웹 페이지가 완전히 로드되었을 때 기능을 실행해야 할 때 주로 사용됩니다.
onload 이벤트는 쿠키를 확인하는 데도 사용됩니다. 또한 사용자 브라우저의 정보를 기반으로 페이지의 올바른 버전이 로드될 때 방문자, 버전 및 브라우저 유형을 확인하는 데 사용할 수 있습니다.
onload 기능은 본문 내에서 사용됩니다. JavaScript 기능이 내장되어 있기 때문에 주로 사용하는 모든 브라우저에서 이 방법을 지원합니다.
onload 함수의 구문은 다음과 같습니다.
<body onload="Method">
페이지가 완전히 로드될 때 경고 메시지를 표시하는 간단한 예를 시도해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#OnloadDiv {
background-color: #DAA520;
width: 800px;
height: 300px;
margin-left: 120px;
text-align: center;
}
</style>
</head>
<body onload="DemoFunction()">
<div id="OnloadDiv">
<h2>Hello this is demonstration of onload event in jQuery!</h2>
<h3>Once the page is fully loaded, the Demo Function will be loaded</h3>
</div>
<script>
function DemoFunction() {
alert("Hello, This is alert from delftstack.com!");
}
</script>
</body>
</html>
위의 코드는 페이지가 완전히 로드될 때 alert 이벤트를 로드합니다. 출력 참조:
위에서 언급했듯이 onload 이벤트를 사용하여 쿠키를 확인할 수 있습니다. 쿠키를 확인하는 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#Cookiediv {
background-color: #DAA520;
text-align: center;
width: 600px;
height: 200px;
margin-left: 120px;
}
#Cookie_Status {
font-size: large;
font-weight: bold;
color: White;
}
</style>
</head>
<body onload="checkCookies()">
<div id="Cookiediv">
<h2>See the answer below if the cookies are enabled or disabled?</h2>
<p id="Cookie_Status"></p>
</div>
<script>
function checkCookies() {
var Cookie_text = "";
if (navigator.cookieEnabled == true) {
Cookie_text = "Cookies are Enabled.";
}
else {
Cookie_text = "Cookies are Disabled.";
}
document.getElementById("Cookie_Status").innerHTML = Cookie_text;
}
</script>
</body>
</html>
위의 코드는 페이지가 완전히 로드되었을 때 쿠키가 활성화되었는지 여부를 확인합니다.
jQuery ready 이벤트
ready 이벤트는 DOM이 로드될 때 발생합니다. 이 이벤트는 문서가 완전히 준비되고 jQuery 메서드 및 이벤트에 대해 편리할 때 발생합니다.
ready 이벤트는 <body onload=""> 태그에서 사용되지 않습니다. jQuery에서 $(document).ready 이벤트가 작동하는 방식을 보여주는 예를 시도해 보겠습니다.
<html>
<head>
<title>jQuery Ready Method</title>
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("#Demo_Div").click(function() {
alert("Hello, This is delftstack.com");
});
});
</script>
</head>
<body>
<div id = "Demo_Div">
Click the div to see the alert.
</div>
</body>
</html>
문서가 준비되면 위의 코드에서 클릭을 요청합니다. 문서가 준비되었음을 클릭하면 경고가 표시됩니다.
출력 참조:
Window.onload와 $(document).ready 이벤트의 차이점
window.onload와 $(document).ready는 유사하게 작동하지만 여전히 몇 가지 차이점이 있습니다.
-
명백한 차이점은
window.onload가 순수한 JavaScript 이벤트라는 것입니다. 이것이 대부분의 라이브러리와 브라우저에서 사용할 수 있는 이유입니다. 반면$(document).ready는 jQuery 라이브러리에서만 사용할 수 있는 jQuery 이벤트입니다. -
다른 주요 차이점은
window.onload가 이미지 및 비디오와 같은 콘텐츠가 로드될 때까지 대기한다는 것입니다. 시간이 많이 걸리는 이유입니다. 대용량 데이터가 로드될 때까지 다른 코드는 실행되지 않습니다.반면
$(document).ready는 DOM 기반입니다. DOM이 로드되면 다른 코드를 실행합니다. 다른 항목이 로드될 때까지 기다리지 않습니다. -
window.onload는$(document).ready보다 더 많은 시간을 소비합니다.
