예제 9-14. onload로 이미지 크기 알아내기
WEB/JAVASCRIPT-CONCEPT 2017. 11. 2. 15:11 |* 이미지 로딩 완료와 onload
이미지가 출력되는 과정은
1. 이미지 파일로부터 로딩하는 과정
2. 로딩된 이미지가 출력되는 두 과정
으로 나뉜다. 하지만 어떤 경우든 이미지 로딩이 완료된 후에야 이미지를 사용할 수 있다.
<img> 태그와 Image 객체
Image 객체는 <img> 태그에 의해 생성된 DOM 객체로서, 자바스크립트 코드로 이미지를 다룰 수 있게 한다.
* Image 객체의 프로퍼티
src // 이미지 주소
width // 이미지가 출력될 폭, 이미지가 로딩되면 이미지의 실제 폭으로 초기화
height // 이미지가 출력될 높이, 이미지가 로딩되면 이미지의 실제 높이로 초기화
complete // 이미지의 로딩이 완료되었는지 여부, true/false
ex)
<img id="myImg" src="apple.png" width="..." height="...">
var myImg = document.getElementById("myImg"); // myImg는 Image 객체 (<img> 태그를 찾아 Image 객체를 알아낸다)
myImg.src = "banana.png" // <img> 태그에 banana.png 이미지 출력 (Image 객체의 src 프로퍼티에 banana.png 파일명을 지정한다.)
* 이미지 로딩 완료와 onload
<img id="myImg" src="apple.png" width="..." height="...">
1. var myImg = document.getElementById("myImg"); // myImg는 Image 객체 (<img> 태그를 찾아 Image 객체를 알아낸다)
2. myImg.src = "banana.png" // <img> 태그에 banana.png 이미지 출력 (Image 객체의 src 프로퍼티에 banana.png 파일명을 지정한다.)
3. var width = myImg.width; // width는 banana.png 이미지의 폭 (banana.png 이미지의 폭을 알아내는 한 줄 코드 추가)
이 코드를 실행하여 3번 라인에서 banana.png의 이미지의 폭을 확실히 알아낼수 없다.
myImg.src = "banana.png" // 이 코드는 myImg 객체가 출력할 이미지 파일명을 banana.png로 지정하는 것 뿐이다.
// 이 코드가 실행되면 banana.png 파일을 로드하여 myImg 객체에 출력하는 별도의 백그라운 작업을 진행시키고, 로드가 완료되었는지 확인하지 않은 채 바로 다음 3라인으로 넘어간다.
그러므로 라인 3의 코드가 실행될 때 2번 라인에서 지시한 banana.png의 로드가 아직 완료되지 않았을 가능성이 있다.
이미지 로딩이 완료되지 않았다면 myImg.width는 0으로 나타난다.
그러면 이미지의 로딩이 완료되는 시점을 어떻게 알 수 있을까?
다음과 같이 이미지 로딩을 지시하기 전에 onload 리스너를 먼저 등록한다.
1 2 3 4 5 6 | var myImg = document.getElementById("myImg"); myImg.onload = function () // 이미지 로딩 완료 시 실행되는 함수 { var width = myImg.width; // 정확한 이미지 폭 알 수 있음. } myImg.src = "banana.png"; // 이미지를 로딩하여 출력하도록 지시 | cs |
예제 9-14. onload로 이미지 크기 알아내기
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 31 32 33 34 35 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>onload로 이미지 크기 출력</title> <script> function changeImage() { var sel = document.getElementById("sel"); var img = document.getElementById("myImg"); img.onload = function () { // 이미지 크기 출력 var mySpan = document.getElementById("mySpan"); mySpan.innerHTML = img.width + "x" + img.height; } var index= sel.selectedIndex; // 선택된 옵션 인덱스 img.src = sel.options[index].value; // <option>의 value 속성 // 이미지 로딩 시작, 완료 후 onload 리스너 호출 } </script> </head> <body onload="changeImage()"> // <body> 태그에 onload="changeImage()"를 작성하는 이유는 첫화면부터 이미지의 크기를 출력하기 위해서 이다 <h3>onload로 이미지 크기 출력</h3> <hr> <form> <select id="sel" onchange="changeImage()"> <option value="media/apple.png">사과 <option value="media/banana.png">바나나 <option value="media/mango.png">망고 </select> <span id="mySpan">이미지 크기</span> </form> <p><img id="myImg" src="media/apple.png" alt="."></p> </body> </html> |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 9-16. onfocus와 onblur, 이름을 입력하지 않고 다른 창으로 갈 수 없음. (0) | 2017.11.02 |
|---|---|
| 예제 9-15. 이미지 갤러리 만들기 : new Image()로 이미지 로딩 (0) | 2017.11.02 |
| 예제 9-13. onload에서 사이트 이전을 알리는 공고창 출력 (0) | 2017.11.02 |
| 예제 9-10. 마우스 관련 이벤트 리스너. 예제 9-11. onmousemove와 마우스 위치 및 버튼. 예제 9-12. oncontextmenu로 소스 보기나 이미지 다운로드 금지 (0) | 2017.11.02 |
| 예제 9-9. onclick 리스너로 계산기 만들기 (0) | 2017.11.02 |