[이벤트] 5. 문서와 이미지 로딩, onload

[이벤트] 5. 문서와 이미지 로딩, onload

2021. 1. 20. 15:21ㆍFront-end/Javascript

728x90

5. 문서와 이미지 로딩, onload

문서의 로딩 완료와 onload

- onload는 HTML 문서나 이미지의 로딩이 완료되는 시점에 호출되는 이벤트 리스너이다.

- 웹 페이지의 출력(로딩)이 완료되면 window 객체에 load 이벤트가 발생한다.

- onload 리스너를 작성하는 2가지 방법

window.onload="alert('onload')";
<body onload = "alert('onload')">

이미지 로딩 완료와 onload

- Image 객체의 프로퍼티 : src, width, height, complete(이미지의 로딩이 완료되었는지 여부, true/false)

- 만약 이미지의 폭을 알아내고 싶을 때, 이미지 로딩이 완료되지 않았다면 이미지의 width는 0으로 나타날 것이므로 이미지 로딩을 지시하기 전에 onload리스너를 먼저 등록한다.

var myImg = document.getElementById("myImg");
myImg.onload = function(){
	var width = myImg.width;
}
myImg.src = "banana.jpg";

new Image()로 이미지 로딩과 출력

- <img> 태그를 사용하지 않고 자바스크립트 코드로 Image 객체를 생성하여 이미지를 로딩할 수 있다.

var bananaImg = new Image();
bananaImg.src = "banana.jpg";

- new Image()에 의해 생성된 Image 객체는 이미지를 로딩하여 저장해 두는 목적으로만 사용된다.

- Image 객체에 로딩된 이미지는 <img> 태그를 통해서만 화면에 출력된다.

- 이미지 갤러리 같이 해상도가 높아 크기가 큰 이미지를 많이 다루는 웹 페이지에서는 new Image()로 이미지 객체를 만들어 미리 이미지를 로딩 해놓으면 출력 속도를 높일 수 있다.

만약 <img id="myImg"> 태그가 있다고 하면

var myImg = document.getElementById("myImg");
myImg.src = bananaImg.src;

이 태그를 통해 브라우저 화면에 출력할 수 있다.

728x90

냥인의 블로그