How to preload images for faster transition
<p>I am using Javascript to change the image when the radio button is clicked. When you first load the page there is a delay after each radio button is clicked and then afterwards it runs smoothly. I am guessing this is from it not loading the image until the radio is clicked and I was wondering if there is a way to do this. The javascript is as follows:</p>

<pre><code>&lt;script type="text/javascript"&gt;


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&lt;radios.length;i++)
{
    radios[i].onclick = changeImage;
}
}

&lt;/script&gt;
</code></pre>
