예제 9-15. 이미지 갤러리 만들기 : new Image()로 이미지 로딩
WEB/JAVASCRIPT-CONCEPT 2017. 11. 2. 15:22 |* new Image()로 이미지 로딩과 출력
<img> 태그를 사용하지 않고 자바스크립트 코드로 Image 객체를 생성하여 이미지를 로딩할 수 있다.
다음 코드는 동적으로 Image 객체를 만들고 banana.png 이미지를 로딩시키는 코드이다.
ex)
var banana.Img = new Image(); // 이미지 객체 생성
bananaImg.src = "banana.png"; // 이미지 로딩 지시. 이미지 로딩이 완료될때 onload 호출
new Image()에 의해 생성된 Image 객체는 이미지를 로딩하여 저장해 두는 목적으로만 사용됨.
Image 객체에 로딩된 이미지는 <img> 태그를 통해서만 화면에 출력된다.
* 로딩된 이미지 출력
var myImg = document.getElementById("myImg");
myImg.src = bananaImg.src; // bananaImg 객체에 로딩된 이미지를 <img> 태그에 출력
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 36 37 38 39 40 41 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>new Image()로 이미지 로딩</title> <script> // 미리 로딩해둘 이미지 이름 배열 var files = ["media/Penguins.png", "media/Lighthouse.png", "media/Chrysanthemum.png", "media/Desert.png", "media/Hydrangeas.png", "media/Jellyfish.png", "media/Koala.png", "media/Tulips.png"]; var imgs = new Array(); for(var i=0; i<files.length; i++) { imgs[i] = new Image(); // 이미지 객체 생성 imgs[i].src = files[i]; // 이미지 미리 로딩 } // 다음 이미지 출력 var next = 1; function change(img) { img.src = imgs[next].src; // 이미지 변경 next++; // 다음 이미지 인덱스 next %= imgs.length; // 개수를 넘으면 처음으로 } </script> </head> <body> <h3>new Image()로 이미지 로딩</h3> <hr> 이미지를 클릭하면 다음 이미지를 보여줍니다.<p> <img style="border:20px ridge wheat" src="media/Penguins.png" alt="." width="200" height="200" onclick="change(this)"> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 9-17. 선택된 라디오버튼 알아내기. 예제 9-18. 체크박스로 선택한 물품 계산 (0) | 2017.11.02 |
|---|---|
| 예제 9-16. onfocus와 onblur, 이름을 입력하지 않고 다른 창으로 갈 수 없음. (0) | 2017.11.02 |
| 예제 9-14. onload로 이미지 크기 알아내기 (0) | 2017.11.02 |
| 예제 9-13. onload에서 사이트 이전을 알리는 공고창 출력 (0) | 2017.11.02 |
| 예제 9-10. 마우스 관련 이벤트 리스너. 예제 9-11. onmousemove와 마우스 위치 및 버튼. 예제 9-12. oncontextmenu로 소스 보기나 이미지 다운로드 금지 (0) | 2017.11.02 |