[Event] JQ - load() 메서드 - JQ 3.0 폐기완료. / 요소 로드 이벤트 부착. (= load메서드 = 로드 메서드)

1. load() 예제 - 이미지 로드 완료 후 경고창 띄우기.
2. load() 정의
3. load() 구문
4. load() 예제 - 이미지 로드 완료 후 텍스트 변경.
5. load() 예제 - 페이지 로드 완료 후 경고창 띄우기

load() 예제 - 이미지 로드 완료 후 경고창 띄우기

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("img").load(function(){

    alert("이미지 로드 완료.");

  });

});

</script>

<img src="https://source.unsplash.com/random" alt="Cinqueterra" width="304" height="236">

 

결과보기

load() 정의

 

이벤트 핸들러를 load 이벤트에 연결.

 

---

 

1.

jQuery 1.8 폐기예고. / jQuery 3.0 폐기완료.

2.

load 이벤트는 지정 요소 로드 완료 후 발생하며, URL (image, script, frame, iframe) 및 window 객체와 연결된 요소와 함께 작동.

3.

브라우저에 따라 이미지 캐시된 경우 (Firefox 및 IE), 로드 이벤트 발생 안 할 수도 있음.

참고 :

load()라는 jQuery AJAX 메서드도 있음. 

어느 것이 호출되는지는 매개변수에 따라 다름.

 

load() 구문

 

$(selector).load(function)

 

---

[매개변수]

 

function

필수. 지정 요소 로드 완료 후 실행할 내용.

 

load() 예제 - 이미지 로드 완료 후, 텍스트 변경.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("img").load(function(){

    $("div").text("이미지 로드 완료");

  });

});

</script>

<img src="https://source.unsplash.com/random" alt="unsplash" width="304" height="236">

<div>이미지 로딩 중.</div>

 

결과보기

load() 예제 - 페이지 로드 완료 후 경고창 띄우기

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $(window).load(function(){

    alert("페이지 로드 완료.");

  });

});

</script>

<img src="https://source.unsplash.com/random" alt="unsplash" width="304" height="236">

 

결과보기