3. Implementation/VB / Java Script

[Javascript] 이미지 preloading 이용하기

SSKK 2009. 7. 4. 13:31
자바스크립트 실행 시에 이미지를 바꾸면, 서버에서 다시 이미지를 불러오기 때문에 속도가 늦을 수 있다. 그래서 Preloading 을 이용하여, 문서가 읽혀질 때 필요한 이미지를 모두 불러와서, 동적으로 이미지 변경한다.

<html>

<head>

<script type="text/javascript">

    var i = 1;

    var imageArr = new Array();

    function preload(){

        for (i = 1; i <= 4; i++){

            imageArr[i] = new Image();

            imageArr[i].src = "preload"+i+".gif";

        }

    }

    function changeImage(){

        if (i > 4) i = 1;

        document.image1.src = imageArr[i].src;

        i ++;

    }

</script>

</head>

<body onLoad="preload()">

    <a href="#" onClick=changeImage()><img  name=image1  src="preload4.gif" border=0></a>

</body>

</html>

 

참고 : 삼성 SDS 멀티캠퍼스 [Java Script 쉽고 빠르게] 참고