오중호랑이의 비밀로그

jQuery ready와 load의 차이 본문

개발이야기/호랑이와 jQuery

jQuery ready와 load의 차이

오중호랑이 2013.02.16 02:32

자 마음에 드는 편집기를 실행해주세요.

윈도우에서는 무료 노트패드++, 유료 에디터플러스를, 맥에서는 무료 TeextWrangler 유료coda2를 추천합니다.
무엇을 사용하던 크게 상관 없습니다.
다만 기본적으로 Syntax Highlight[각주:1]를 지원하는 편집기를 이용하세요.
가끔 "나때는~ 아무것도 없는 노트패드(메모장)로 ...어쩌고" 라고 으시대는 사람도 있지만요.

위 이미지와 같이 한개의 html 문서를 만드세요.
앞장에서 배운 jQuery를 불러오는 소스를 <head>와 </head>사이에 넣었습니다.
그리고 우리가 편집해야할 부분은 바로 5번째 라인입니다.
보통의 경우 console.log를 사용하여 콘솔에 로그를 찍어봅니다만, 확실히 확인하기 위하여 alert함수를 사용하기로 합니다.
alert함수는 알다시피 파라메터를 메시지로 경고합니다.

	alert('ojtiger.com');

5번 라인에 위 소스를 추가해보세요.
저장하시고, 페이지를 실행시켜보세요.

여기 까지 따라왔다면 정말 소질이 있는분입니다.
그럼 jQuery를 사용하여 alert함수를 실행해 보도록 하겠습니다. 방금 추가한 5번째 라인을 삭제하시고 다음과 같이 입력해보세요.

	$(document).ready(function(){
		alert('ojtiger.com');
	});

저장하시고 페이지를 새로고침 해서 다시 실행해보세요.
새삼스럽게 이미지를 올리지 않을꺼에요. 결과는 같습니다 다만 과정은 다릅니다.
앞서 alert만 호출한 경우와는 다르게 jQuery를 이용하여 호출한 alert은 ready 메소드를 사용하여 문서의 DOM이 모두 로드 되었을때 실행되었습니다.
비슷한 방법으로 다음과 같은 방법이 있습니다.

	$(window).load(function(){
		alert('ojtiger.com');
	});

이것도 결과는 같습니다. 하지만 내부적으로 어떠한 순서의 차이가 있습니다.

브라우저가 HTML파일을 읽어오는 순서


이해가 됐나요? 우리는 특별한 이유가 없으면 첫번째 방법인 ready메소드를 사용해서 jQuery를 구현해 나갈 것 입니다.
자바스크립트 조차 몇번 다루어보지 않아서 메소드가 뭔지, DOM이 뭔지 모르시겠다구요?
아직 충분히 몰라도 좋습니다. 위 소스와 아래 호랑이의 설명을 보고 이해하려 하지마시고 그냥 외우세요.
다 외우셨으면 다음장으로 넘어가기에 충분합니다.

$ = 그냥 문법입니다. 모든 셀렉터앞에는 '$'를 사용합니다.
document = 셀렉터입니다. 괄호안에 CSS 문법을 사용해서 html문서의 요소를 선택할 수 있습니다. 다만, 여기서는 document란 값을 주어서 문서전체를 선택했네요.
.ready = 레디 메소드 입니다. "준비가 되면" 으로 이해하시면 됩니다.
function = 핸들러입니다. 핸들러가 뭘까요, 이해하려하지마세요 넘어가도록 하겠습니다.

아직 모르시겠다면 예제를 다운로드 받아보세요.
example02.zip

  1. 문법에 색상을 더해주는 기능 [본문으로]
신고

'개발이야기 > 호랑이와 jQuery' 카테고리의 다른 글

jQuery 숨기고 보이는 레이어  (6) 2013.12.11
jQuery 폼 컨트롤 하기  (12) 2013.02.18
jQuery 요소를 컨트롤 하기  (0) 2013.02.16
jQuery ready와 load의 차이  (14) 2013.02.16
jQuery 시작하기  (0) 2013.02.15
14 Comments
  • 2013.10.19 14:45 비밀댓글입니다
  • 오중호랑이 2013.10.19 16:00 신고 $(document).ready(function(){
    var i = 1;
    $('img').each(function(){
    $(this).bind('error', function(){
    if( i < 3 ){
    $(this).attr("src", $(this).attr('value') + "?t=" + new Date().getTime());
    }
    i++;
    });
    });
    });
    댓글에선 들여쓰기가 안먹는군요..
    이미지 만큼 돌면서 error를 잡으면 리로딩 하게 해주면 됩니다.
    이때 src에 같은 파일명을 쓰면 리로드를 하지 않기 때문에 이유없는(...) 파라메터를 붙여주고,
    무한 루프를 방지하기 위해 3번까지만 리로드 되게 합니다.
  • 2013.10.20 23:40 비밀댓글입니다
  • 오중호랑이 2013.10.21 10:38 신고 로딩이 시작되기 때문에 .error()로는 안잡히는것 같네요.
    404가 나오면 잡히겠지만, 로딩이 시작되니깐... 그런것 같아요..
    $(document).ready(function(){
    $(window).bind('load', function(){
    //code here
    });
    });

    위 처럼 해보세요 모든 오브젝트가 로드 되었을때 실행되고,
    .error() 가 아닌 이미지의 width(), height() 등으로 속성을 파악해서 로딩이 안된거라고 파단 됐을때 리로드 시키면 될듯합니다.
  • 2013.10.22 11:57 비밀댓글입니다
  • 김원진 2014.07.29 11:29 신고 감사합니다.
  • 2015.01.12 16:46 비밀댓글입니다
  • 2015.09.06 04:23 신고 개인적인 궁금함이 있어 질문합니다.
    window는 document보다 상위의 개념이라고 알고 있는데
    $(document).ready(); 의 호출 시점이 $(window).road보다 빠른 이유/개념에 대해서
    간략하게나마 설명해 주실 수 있을까요?
    감사합니다.
  • 오중호랑이 2015.09.10 11:16 신고 document.ready는 ready상태, 브라우저에서 DOM이 완성됬을때 시점이고,
    window.load는 외부호출 (src) 등, 로딩이 완료된 시점입니다.
    dom이 완성됐다는 것은 HTML의 소스코드만의 로딩이 끝나서 어떻게 표현할것인지나 내부속성이 완성 됐다는것이고, 로딩이 끝난 시점은 외부호출까지 끝난 시점입니다.
    상위개념이라 하더라도 로드(.load)되는속도가 준비(.ready)보다 빠른건 아니니깐요.
  • 나그네 2015.11.29 03:13 신고 사실 window 객체와 document 객체는 서로 의존적이지는 않습니다.
    다만 window의 크기나 URL 주소 등이 문서에 따라 새롭게 정의되는 부분이 있어서 document 객체에 따라 window 객체도 새롭게 정의된다는 일관된 개념이 있었던 것입니다.
    사실 이건 외우기보다는 이해가 더 중요합니다.
    window는 document보다 상위 개념이라고 하는 것은 브라우저객체모델에서 정의한 것일 뿐, 그 상위 개념이 순서에 따라 먼저 존재한다거나 나중에 존재해야 한다는 것은 각 웹브라우저의 기술적 방법의 정의일 뿐입니다. 기술적인 방법에는 차이가 있을지라도 더욱 빠르고 효과적으로 다가 서려보니 비슷비슷한 구현(일부 컨텐츠가 파싱되고 화면에 나타나는 동안 계속해서 남은 컨텐츠를 네트워크로부터 받아온다거나...)이 나올 수밖에 없고, 다년간에 축적된 경험을 통해서 형성되고 브라우저끼리 서로 모방하면서 지금과 같이 성립이 된(표준 명세에도 없는..) 것이기에 그러한 순서를 제공한다고 보시면 이해가 되시라 봅니다. (실제 물리적인 구현과 이론적인 순서는 다를 수 있다는 말)

    추가:
    인터넷익스폴러에서 " alert(window == document.body) " 를 확인하여 보세요. 웹브라우저에 따라 기술적으로 구현이 다를 수 있습니다. window객체도 모두 초기화가 될 것이라는 생각도 잘 못된 생각입니다. 실제 우리가 확인할 수 없는 부분도 있고, 실제 우리에게 그렇게 작동 되도록 보이는 것도 일부 있습니다.
  • 2016.03.06 22:03 비밀댓글입니다
  • 오중호랑이 2016.03.08 11:01 신고 치료되었다니 축하드립니다.
  • 정원영 2016.04.07 22:15 신고 정말 잘 읽고 갑니다!!! 기본이 없었네요 ㅠㅠ 블로그에 링크를 가져가겠습니다
    혹시 불편하시면 댓글 달아주시면 삭제하겠습니다.
    ( http://blog.naver.com/dnjsjd11/220677324033 )
  • 오중호랑이 2016.04.20 16:42 신고 링크를 가져가는건 괜찮습니다.^^
댓글쓰기 폼