* 로딩 이벤트 메서드
- 로딩 이벤트 메서드는 브라우저에서 HTML 문서를 불러올 때 HTML 문서 객체를 로딩(Loading)해 옴.
- 이때 지정한 객체의 로딩이 완료되면 이벤트 핸들러가 실행됨.
* ready() / load() 이벤트 메서드
- ready()와 load() 이벤트 메서드는 HTML에 지정된 문서 객체의 로딩이 완료된 후 이벤트 핸들러가 실행됨.
- 어떤 선택자(Selector)를 사용하려면 먼저 문서 객체를 불러와야 함.
- 문서 객체를 먼저 불러와야할 때 ready() 이벤트 메서드를 사용함.
- 이때 문서 객체가 완전히 로딩되더라도 이미지나 프레임에 연동된 소스는 그 이후 로딩됨.
- load() 이벤트 메서드는 이런 이미지나 프레임에 연동된 소스가 로딩이 완료되면 이벤트 핸들러를 실행시킴.
- 주로 load() 이벤트 메서드는 이미지 또는 프레임(frame)에 연동된 소스를 변형시킬 때 사용함.
- 기본형
|
$(문서 객체).ready(function(){ 실행문 }); // ready() 이벤트 메서드 $("이미지 또는 프레임").load(function(){ 실행문 }); // load() 이벤트 메서드 |
- 사용 예)
|
1. 모든 문서 객체가 로딩이 완료된 후 실행문이 실행됨. $(document).ready(function(){ ... }); 2. 로고 이미지의 태그와 소스가 로딩이 완료된 후 실행문이 실행됨. $("img.logo").load(function(){ ... }); 3. load() 이벤트 메서드는 이미지나 프레임을 제외한 문서 객체에는 사용할 수 없음. $("body").load(function(){ ... }); |
- load() 이벤트 메서드를 사용하려면 이미지나 프레임 요소가 먼저 로딩되어 있어야 함.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 |
<!-- 문단 태그 영역 -->
<body>
<div id="wrap"></div>
<iframe src="http://easy.com/" frameborder="0" width="300" height="200"></iframe>
~중략~
<!-- 메서드 적용 -->
<script type="text/javascript">
$("iframe").load(function() { // <iframe> 태그의 src에 연동된 사이트가 로딩이 완료된 후에 function(){...}의 실행문을 실행.
$("#wrap").append("<p>로딩 완료</p>");
// id="wrap"인 요소 내의 마지막 영역에 새 요소를 추가함.
});
$(document).ready(function(){ // HTML 문서 객체가 로딩이 완료된 후에 function(){...}의 실행문을 실행.
$("#wrap").append("<p>레디 완료</p>");
// id="wrap"인 요소 내의 마지막 영역에 새 요소를 추가함.
})
</script>
</body>
<!--
load() 이벤트 메서드를 사용하려면 이미지나 프레임 요소가 먼저 로딩되어 있어야 함.
그래서 <body> 태그의 마지막 부분에 제이쿼리를 작성함.
--> |
cs |
내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
'Programming > jQuery' 카테고리의 다른 글
| 자주 사용되는 기타 이벤트 메서드 (0) | 2017.05.23 |
|---|---|
| 이벤트 등록 메서드 - 키보드 이벤트 (0) | 2017.05.23 |
| 키보드 접근성을 위한 이벤트 등록법 (0) | 2017.05.23 |
| 이벤트 등록 메서드 - 마우스 이벤트 (0) | 2017.05.23 |
| 이벤트 등록 메서드란? (0) | 2017.05.23 |
| 객체 조작 메서드 - 객체 편집 메서드 (0) | 2017.05.22 |
| 객체 조작 메서드 - 수치 조작 메서드 (0) | 2017.05.22 |
| 객체 조작 메서드 - 속성 조작 메서드 (0) | 2017.05.22 |
