728x90
반응형
페이지가 로딩이 되는 경우 특정 메소드를 호출하는 경우가 많을것이다. 보통 초기값을 세팅하는 경우에 사용이 될텐데, window.onload 혹은 body에서 호출하는 경우 말고 jQuery에서 사용하는 방법을 알아보도록 하자.
<HTML>
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ alert("Page Loading Complete"); });
</script>
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ alert("Page Loading Complete"); });
</script>
</head>
<body>
<table>
<tr>
<th>기종</th>
<th>제목</th>
</tr>
<tr>
<td>Xbox360</td>
<td>Gears of War</td>
</tr>
<tr>
<td>PS3</td>
<td>Resistance</td>
</tr>
</table>
</body>
</html>
<table>
<tr>
<th>기종</th>
<th>제목</th>
</tr>
<tr>
<td>Xbox360</td>
<td>Gears of War</td>
</tr>
<tr>
<td>PS3</td>
<td>Resistance</td>
</tr>
</table>
</body>
</html>
너무 간단하기 때문에 결과만 보도록 하자.
위의 그림처럼 페이지가 로딩이 되면 완료 메세지가 뜨게 된다.
만약 페이지내의 특정 개체와 페이지 로드를 체크해서 로딩이 되면 메세지가 뜨게 되면 어떤 결과가 발생할까?
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ alert("Page Loading Complete"); });
$("#contentArea").ready(function(){ alert("Layer Loading Complete"); });
</script>
<head>
<title>jQuery</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ alert("Page Loading Complete"); });
$("#contentArea").ready(function(){ alert("Layer Loading Complete"); });
</script>
</head>
<body>
<table>
<tr>
<th>기종</th>
<th>제목</th>
</tr>
<tr>
<td>Xbox360</td>
<td>Gears of War</td>
</tr>
<tr>
<td>PS3</td>
<td>Resistance</td>
</tr>
</table>
<div id="contentArea"></div>
</body>
</html>
<body>
<table>
<tr>
<th>기종</th>
<th>제목</th>
</tr>
<tr>
<td>Xbox360</td>
<td>Gears of War</td>
</tr>
<tr>
<td>PS3</td>
<td>Resistance</td>
</tr>
</table>
<div id="contentArea"></div>
</body>
</html>
이런경우 페이지내의 위치나 개체가 로딩 순서를 가지는게 아니라, 위의 자바스크립내에서 ready 호출순서에 따라 메세지가 보이게 된다.
즉 document와 div의 로딩순서가 아니라 자바스크립트 체크 순서대로 document, div 가 로딩이 되었다고 메세지가 뜬다. 자바스크립트에서 순서 변경시 마찬가지로 div, document 순으로 메세지가 뜬다.
[출처] jQuery - Page OnLoad 테스트|작성자 하늘밑
728x90
반응형
'JQUERY > 소스코드' 카테고리의 다른 글
| jQuery 부모창 콘트롤 opener, parent (2) | 2015.03.13 |
|---|---|
| 이클립스에서 jquery 오류 없애기 (0) | 2015.02.03 |
| 풍선 도움말 (0) | 2015.02.03 |
| jQuery - Accordion (0) | 2015.02.03 |
| jQuery- 다른 페이지 로딩하기 (1) | 2015.02.03 |
| jQuery 스터디 시작 (0) | 2015.02.03 |
| jQuery event target (0) | 2015.02.03 |
| jQuery - Selectbox 다루기 (0) | 2015.02.03 |
nineDeveloper
안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!