早送りの画像をプリロードする方法

Question

ラジオボタンをクリックしたときに画像を変更するためにJavaScriptを使用しています。最初にページをロードすると、各ラジオボタンがクリックされた後に遅延があり、その後はスムーズに実行されます。私はこれがラジオがクリックされるまでイメージをロードしていないことを推測しており、これを行う方法があるかどうか疑問に思っていました。次のようにJavascriptを次のとおりです。

<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を参照するには、プリロードされた画像が収集される方法です。