Notice
Recent Posts
Recent Comments
Archives
Today
Total
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Link
Tags more
관리 메뉴

드럼치는 프로그래머

[jQuery] window.onload를 대체하는 jquery의 ready 함수 본문

★─Programing/☆─WebProgram

[jQuery] window.onload를 대체하는 jquery의 ready 함수

드럼치는한동이 2016. 7. 25. 02:03

window.onload 함수는 웹페이지의 로딩이 끝나는 시점에 실행되는 함수다


window.onload = function () {
 alert("로딩 완료");
}


와 같이 사용하게 되면 페이지 로드가 끝난 후에 "로딩 완료" 라는 얼럿창이 뜨게 된다.


하지만 onload에는 몇가지 단점이 있는데, 이 함수는 페이지 안의 이미지나 외부 파일이 로드 될때까지도 기다린 후에 사용되기 때문에 엔드유저 입장에서 불필요하게 로딩시간이 길어지게 된다. 더욱 심각한것은 동일한 페이지 내에서 onload 함수는 하나만 존재해야 한다는 것인데, 만약 외부 라이브러리에서 onload가 이미 선언 되어 있다면 이를 찾거나 하나로 합치는 것은 여간 어려운일이 아니다.

또한 <body onload=""> 와 같은 attribute 가 설정이 되어 있는 경우에는 attribute의 onload=""만 작동할뿐 window.onload는 동작 하지 않는다.


jquery 에서는 이러한 onload의 단점들을 보완하는 ready() 함수를 제공하는데 위의 코드를 jquery 형식으로 바꾸면 다음과 같이 된다.


<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function() { alert("로딩 완료"); });
</script>


이 ready() 함수가 실행되는 시점은 브라우저가 DOM트리 생성한 직후 이므로 유저 입장에서는 (이미지나 외부 리소스의 로딩을 기다릴 필요 없이)훨씬 빠르게 웹페이지의 기능을 사용할수가 있다.


아래는 확인코드, 이 스크립트를 실행하게 되면 첫번째 ready() -> 두번째 ready() -> 두번째 window.onload 의 순서로 얼럿창이 뜨게된다. (첫번째 window.onload 는 실행되지 않는다.)


<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
window.onload = function() { alert("첫번째 window.onload"); };
window.onload = function() { alert("두번째 window.onload"); };
$(document).ready(function() { alert("첫번째 ready()"); });
$(document).ready(function() { alert("두번째 ready()"); });
</script>


[출처] http://jinolog.com/programming/javascript/2011/03/21/jquery-ready-function.html


저작자표시 비영리 동일조건

'★─Programing > ☆─WebProgram' 카테고리의 다른 글

[JavaScript] table 태그 만들기 - createElement()  (0) 2016.07.25
[JavaScript] 모든 자식 엘레멘트 삭제하기 (Remove all children)  (0) 2016.07.25
[JSP] include 액션 태그 <jsp:include>  (0) 2016.07.25
[jQuery] slideToggle(), 슬라이드 토글하기  (0) 2016.07.25
[JavaScript] 현재 페이지 refresh 하는 3가지 방법~  (0) 2016.07.25
'★─Programing/☆─WebProgram' Related Articles more
Comments