Last week I received an e-mail form a guy asking about how to preload interface images for submit button in forms, like the one at the web.burza contact form. The method is quite simple, really.

Here’s the sample part of the HTML form from the web.burza site:

<form method="post" action="#">
    <fieldset>
        <label for="email" class="required">E-mail</label>
        <input type="text" size="30" name="email" id="email" />
        <input type="image" id="submit_button" src="redButtonOff.gif" alt="[Send]" title="Send message" />
    </fieldset>
</form>

And the code placed in the external JavaScript file:

<script type="text/javascript">
/* <[CDATA[ */
var button_on = new Image();
var button_go = new Image();
button_on.src = 'redButtonOn.gif';
button_go.src = 'redButtonGo.gif';
onload = function() {
    var sb = document.getElementById('submit_button');
    if(sb) {
        sb.onmouseover = function() { this.src='redButtonOn.gif'; }
        sb.onmouseout = function() { this.src='redButtonOff.gif'; }
        sb.onfocus = function() { this.src='redButtonOn.gif'; }
        sb.onblur = function() { this.src='redButtonOff.gif'; }
        sb.onclick = function() { this.src='redButtonGo.gif'; }
    };
};
/* ]]> */
</script>

JavaScript experts advise not to use HTML-DOM properties, such as src. Instead, we should create images with the ‘true’ DOM (a.k.a. DOM Core), and set the src attribute with the setAttribute method. The difference between the two is that the DOM Core methods can be used by any programming language with Dom support, not just JavaScript, but that’s another story.

See the following snippet:

<script type="text/javascript">
/* <[CDATA[ */
var button_on = document.createElement('img');
var button_go = document.createElement('img');
button_on.setAttribute('src','redButtonOn.gif');
button_go.setAttribute('src','redButtonGo.gif');
onload = function() {
    var sb = document.getElementById('submit_button');
    if(sb) {
        sb.onmouseover = function() { this.src='redButtonOn.gif'; }
        sb.onmouseout = function() { this.src='redButtonOff.gif'; }
        sb.onfocus = function() { this.src='redButtonOn.gif'; }
        sb.onblur = function() { this.src='redButtonOff.gif'; }
        sb.onclick = function() { this.src='redButtonGo.gif'; }
    };
};
/* ]]> */
</script>

Okay, that was for the single form button, with just two images. But what about the rest of it? Say, you have the AJAX magic somewhere on the site, which pretty quickly delivers data into the not so fast newly created layout element with all those additional fancy supporting imagery. See the example on the Hellgate: London demon listing page…

No worries – for multiple image preload, we’ll just loop all the image sources with a for loop. And here’s one possible solution how to handle this:

var preloaded = new Array();
function preload_images() {
    for (var i = 0; i < arguments.length; i++){
        preloaded[i] = document.createElement('img');
        preloaded[i].setAttribute('src',arguments[i]);
    };
};
preload_images(
    '/css/cssimg/item_listing/vli_top.gif',
    '/css/cssimg/item_listing/vli_bottom.gif',
    '/css/cssimg/item_listing/vli_active_top.gif',
    '/css/cssimg/item_listing/vli_active_bottom.gif',
    '/css/cssimg/main_layout/plasma_box_gallery_top_demon.gif'
);

The above code is best placed in the first external JavaScript file.

Suggestion

My personal favorite images for the preload array are favicon.ico and the footer.gif, but also fancy checkboxes and radio buttons imagery.

Related posts

• Preload :hover images
• Image preloader (visual effect)