빠른 전환을 위해 이미지를 미리로드하는 방법

Question

라디오 버튼을 클릭 할 때 자바 스크립트를 사용하여 이미지를 변경하고 있습니다. 페이지를 처음로드 할 때 각 라디오 버튼을 클릭 한 후 지연이 발생하고 이후에는 원활하게 실행됩니다. 라디오를 클릭 할 때까지 이미지를로드하지 않는 것으로 추측하고 있습니다.이 작업을 수행 할 수있는 방법이 있는지 궁금합니다. 다음과 같이 자바 스크립트는 다음과 같습니다

<script type="text/javascript"> 


var switchingImage; 
var productid; 

function changeImage() 
    { 
    switchingImage.src = this.value; 
    productId.value = this.alt; 
    } 


window.onload = function() { 
var radios = document.getElementById('imageSwitcher').getElementsByTagName('input'); 
var products = document.getElementById('imageSwitcher').getElementsByTagName('alt'); 

switchingImage = document.getElementById('imageToSwitch'); 
productId = document.getElementById('productToSwitch'); 

for(var i=0;i<radios.length;i++) 
{ 
    radios[i].onclick = changeImage; 
} 
} 

</script> 

Answer 1

이미지를 미리로드하려면

이미지 다운로드 및 사용에 대한 캐시에 저장됩니다

new Image().src = "path/to/file/image.png"; 

.

Answer 2

물론 이미지 배열을 만든 다음 나중에 참조하십시오. 대신 코드 switchingImage.src = this.value; 줄이 배열을 참조합니다. 미리로드 된 이미지를 배열에 배치 할 때는 new 키워드를 사용해야합니다. 예를 들어 :

var preLoad = new Array(); 
var firstImage = new Image(); 
firstImage.src = "someLocation/thisImage.jpg"; 
preLoad.push(firstImage); 

모든 이미지에 대해 이렇게 한 다음 switchingImage.src에 사용하기 위해 배열 preLoad[imageNumber].src를 참조하는 사전로드 된 이미지가 수집 될 방법이다.