jQuery API - load(), 로드되면 발생하는 이벤트

load

원문 링크 http://api.jquery.com/load/

.load( handler(eventObject) )Returns : jQuery

개요 : JavaScript 이벤트 "load" 를 바인딩 합니다.

• .load( handler(eventObject) )
• handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
• .load( [eventData], handler(eventObject) )
• eventData 이벤트 핸들러에 전달할 데이터 집합.
• handler(eventObject) 이벤트가 발생했을 때 실행될 기능.

이 함수는 .bind('load', handler)를 줄인 것입니다.

load 이벤트는 모든 요소들이(포함한 하위 요소까지도) 완전히 읽혀(load)졌을 때 발생합니다. 이 이벤트는 a URL: images, scripts, frames, iframes, 그리고 window 객체와 같은 특정한 요소들에서 사용할 수 있습니다.

예를 들어, 페이제에 간단한 이미지가 있다고 가정하겠습니다.

<img src="book.png" alt="Book" id="book" />

이미지에 이벤트 핸들러를 바인딩 하려면:

$('#book').load(function() {
  // Handler for .load() called.
});

이미지가 로드되면 핸들러가 바로 호출됩니다.

일반적으로, 모든 이미지가 모두 로드될 때까지 기다리는 것은 낭비입니다. 만일 코드를 더 일찍 실행시킬 수 있다면 If code can be executed earlier, it is usually best to place it in a handler sent to the .ready() 함수를 사용하여 핸들러를 처리하는 것이 가장 일반적인 방법입니다.

Ajax 모듈 또한 함수 이름이 .load()인 것이 있습니다. 어떤 것이 실행될지는 전달된 인자에 달려 있습니다.

이미지들에 load 이벤트를 사용할 때 주의하셔야 합니다.

많은 개발자들이 이미지(또는 이미지들의 집합)가 완전히 로드되었을 때 기능을 실행하기 위해 .load() 함수를 사용하여 문제를 해결하려 합니다. 이러한 시도에는 아래처럼 몇가지 주의사항이 있습니다. 보시죠.

- 이것은 언제나 동일한 결과를 나타내지 않으며 크로스 브라우징을 지원하지 않습니다.

- 이것을 이미지 경로가 이전의 이미지 경로와 동일하게 설정되어 있다면 webkit에서는 정상적으로 발생하지 않습니다.

- 이것은 DOM 트리에서 버블링(상위 요소로의 전파)을 지원하지 않습니다.

- 이미지가 브라우져 캐시에 의해 이미 존재한다면 실행이 중지될 수 있습니다.

헉, 이건 뭐 쓰라는 건지 말라는 건지;;; 문구만 봐서는 정확히 어떤 현상인지 모르겠지만 어쨌든 쓰지 않아야 한다고 강력히 권고하고 있는거 같습니다.

예 제
그래픽을 포함한 페이지가 완전히 로드되고 나면 기능을 실행합니다..

$(window).load(function () {
  // run code
});

 

예 제
이미지가 로드되면 클래스 "bigImg" 를 height가 100보다 작은 모든 이미지들에 추가해 줍니다.

$('img.userIcon').load(function(){
  if($(this).height() > 100) {
    $(this).addClass('bigImg');
  }
});

 

흠. 사실 body의 onload() 함수는 계륵과 같아서 고민일 때가 많았던 기억이 있습니다. 요즘이야 대체할 만한 기술이 많아졌지만 예전에는 이 함수가 뜻대로 실행되지 않아서 고민이었던 기억이 있네요.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.