웹개발
[명품 웹 프로그래밍] 9장 예제 9-15, new Image()로 이미지 로딩
hatch
2021. 12. 12. 21:13
728x90
반응형
1. 자바스크립트 코드
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>x</title>
</head>
<body onload="changeImg()">
<h3>new Image()로 이미지 로딩</h3>
<hr>
<img style="border: 20px ridge wheat"
src="media/penguins.png" width="267" height="200" onclick="change(this)">
<script>
//배열에 저장된 이름 이미지를 미리 로딩
var files = ["media/penguins.png", "media/Tulips.png", "media/Desert.png", "media/Koala.png"];
//img 배열 및 객체 생성 후, files와 연결
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>
</body>
</html>