예제 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> 태그에 출력

<!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>