이미지 미리 읽기

이미지를 미리 읽어둔다(preloading)는 것은 브라우저로 하여금 이미지를 보여주기 전에 미리 다운로드하도록 만드는 것을 의미합니다. 이미지는 다운로드된 후 웹 브라우저의 캐시에 저장되고 이후 발생하는 요청은 웹 서버로부터 시간을 들여 다운로드받는 대신 방문객의 하드 드라이브로부터 해당 파일을 제공받습니다.
미리 읽어두기를 위한 방법 중 하나는 스크립트의 첫부분에 미리 읽어두고자 하는 모든 그래픽 파일의 경로를 담은 배열을 생성한 다음, 이 배열에 루프를 수행하여 각각에 대한 새 이미지 객체를 생성하는 것입니다.

var preloadImages = ['images/1.png',                         'images/2.png',                         'images/3.png'];     var imgs = [];     for (var i=0; i<preloadImages.length; i++){         imgs[i] = new Image();         imgs[i].src = preloadImages[i];     }

먼저 preloadImages라는 이름의 배열을 생성하였는데 이 배열은 미리 읽어들이고자 하는 그래픽 파일들의 경로인 세 개의 값을 포함하고 있다. 그리고 미리 읽어들인 이미지를 저장할 imgs라는 새로운 빈 배열을 생성한 후 for 루프를 이용해서 preloadImages 배열의 각 원소에 대해 한 번씩 실행하도록 만들었다. for 루프 안에는 새로운 이미지 객체를 생성하고 preloadImages 배열로부터 파일의 경로를 가지고 오게 하였다. 바로 이 부분이 이미지를 다운로드 하는 마술이 일어나는 곳이다.