[자바스크립트] 이미지 프리로딩 (window.load)

마우스 온 오버 할때 버튼이미지가 교체된다거나 배경 이미지의 변경이 있는 경우 아래와 같은 자바스크립트를 통해 해당 이미지를 바꿔주곤 한다.

<img src="a.gif" onmouseover="this.src='b.gif';">

이런 경우 마우스가 오버하는 순간 이미지를 불러들여오게 되는데 

만약 이미지가 배경이미지이거나 혹은 불러들이는 어떤 데이터가 용량이 큰 경우 

사용자의 입장에서는 사이트의 반응이 느리다고 느낄 수 있다.

이런 문제를 해결하기 위해서는 미리 해당 데이터를 불러들여오는 방법이 있는데 불러들여오는 방법에는 여러가지가 있을 수 있다.

숨겨진 div그룹안에 해당 image를 호출하거나 아이프레임을 쓴다거나 하는 방법들을 쓸 수 있지만

이런 식으로 이미지를 불러들이는 경우 디스플레이 되지 않는 이미지를 로딩하기 위해 첫 페이지의 진입속도가 더뎌지는 문제가 생기게 된다.

따라서 아래와 같은 방법을 사용하면 좋다.

<script language="javscript">

var preloadImage;

1. function preload() {
1. preloadImage  = new Image();
2. preloadImage.src="이미지주소";

2. }

   window.onload = function() {

1. preload();

3. }

4. 
   

5. </script>

설명하자면 미리 로딩할 이미지를 담을 객체를 전역 이미지 객체로 생성한 후 

이 객체에 담을 이미지들을 담고 있는 함수를 현 페이지의 로딩이 끝난 상태에서 불러들이는 것이다.