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보다 더 많은 시간을 소비합니다.
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook