Load images during page startup
<p>I am currently working with radio buttons and check boxes to display images based on values. I am noticing that the images are loading slowly at the start. For example, Have pre-created the image elements with "display:none" (with their src attribute already set) so then the only thing I have to do is play with the display attribute. Is there away to preload the images? <a href="http://webprolearner2346.zxq.net/bike_calculator/" rel="nofollow">EXAMPLE</a></p>

<p><strong>JS</strong></p>

<pre><code>&lt;script&gt;
function check_value(currentElement, val, id, type) {
    var el = document.getElementById("imgBox" + id);
    if (val &gt; 0 &amp;&amp; val &lt; 4) { //will trigger when [1,2,3]

        if(currentElement.checked)
        {
            el.src = "images/" + type + val + ".jpg";
            el.style.display = "";
        }
        else
        {
            el.src = "";
            el.style.display = "none";
        }       

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

<p><strong>HTML</strong></p>

<pre><code>&lt;h2&gt;Choose a bike&lt;/h2&gt;
&lt;form name="builder"&gt;
    &lt;input type="radio" name="field" onclick='check_value(this, 1, 1, "bike")'/&gt; KAWASAKI KX 450F&lt;br /&gt;
    &lt;input type="radio" name="field" onclick='check_value(this, 2, 1, "bike")'/&gt; 2010 Yamaha Road Star S&lt;br /&gt;
    &lt;input type="radio" name="field" onclick='check_value(this, 3, 1, "bike")'/&gt; Aprilia RSV4&lt;br /&gt;
&lt;/form&gt;
</code></pre>
