이미지 미리 로딩

function imagepreload(ary) {

  try{

    if (!ary) return;

    arv = ary.split("|");

    var arr = new Array();

    for(var i=0; i<arv.length; i++){

      arr[i] = new Image(); 

      arr[i].src = arv[i];

    }

  }catch(e){}

}

imagepreload("이미지1|이미지2|이미지3");

-----------------------------------------------

위와같은 방식으로 이미지를 미리 로딩시켜둘 수 있다.

이미지를 미리 로딩시키는 이유는, 웹페이지를 표시하기 전에 이미지가 사용자 컴퓨터에 미리 로딩이 되면, 이미지 로딩이 제대로 되지 않아서 이미지에 엑스박스가 뜨는 현상을 피할 수 있고, 자동 리사이즈를 구현해야할 경우에도 이미 이미지가 로딩되어 있으므로, 이를 이용해서 손쉽게 리사이즈를 처리할 수 있다.

웹페이지에서는, 먼저 스크립트가 처리되고, 그 다음으로 태그가 처리되기 때문에, 위와같이 스크립트에서 이미지를 먼저 로딩하도록 처리하는 방법을 이용해 이미지로 인한 출력오류나 그밖의 문제를 예방할 수 있다.

출처:(js) 이미지 미리 로딩시키기 (image preload)