Question

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? EXAMPLE

JS

<script>
function check_value(currentElement, val, id, type) {
    var el = document.getElementById("imgBox" + id);
    if (val > 0 && val < 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";
        }       

    }
}    
</script>

HTML

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

Answer 1

Yes! Preloading images is really easy if you have JQuery:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

$(['some-image.gif']).preload();

Also check this resource: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/