{"id":177,"date":"2006-06-07T15:49:04","date_gmt":"2006-06-07T13:49:04","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2006\/06\/07\/preload-images-with-javascript\/"},"modified":"2013-01-15T19:06:40","modified_gmt":"2013-01-15T18:06:40","slug":"preload-images-with-javascript","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2006\/06\/07\/preload-images-with-javascript\/","title":{"rendered":"Preload images with JavaScript"},"content":{"rendered":"

\"web.burza<\/a><\/p>\n

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<\/a>. The method is quite simple, really.<\/p>\n

Here\u2019s the sample part of the HTML form from the web.burza site:<\/p>\n

<form method=\"post\" action=\"#\">\r\n    <fieldset>\r\n        <label for=\"email\" class=\"required\">E-mail<\/label>\r\n        <input type=\"text\" size=\"30\" name=\"email\" id=\"email\" \/>\r\n        <input type=\"image\" id=\"submit_button\" src=\"redButtonOff.gif\" alt=\"[Send]\" title=\"Send message\" \/>\r\n    <\/fieldset>\r\n<\/form><\/code><\/pre>\n
And the code placed in the external JavaScript file:<\/p>\n
<script type=\"text\/javascript\">\r\n\/* <[CDATA[ *\/\r\nvar button_on = new Image();\r\nvar button_go = new Image();\r\nbutton_on.src = 'redButtonOn.gif';\r\nbutton_go.src = 'redButtonGo.gif';\r\nonload = function() {\r\n    var sb = document.getElementById('submit_button');\r\n    if(sb) {\r\n        sb.onmouseover = function() { this.src='redButtonOn.gif'; }\r\n        sb.onmouseout = function() { this.src='redButtonOff.gif'; }\r\n        sb.onfocus = function() { this.src='redButtonOn.gif'; }\r\n        sb.onblur = function() { this.src='redButtonOff.gif'; }\r\n        sb.onclick = function() { this.src='redButtonGo.gif'; }\r\n    };\r\n};\r\n\/* ]]> *\/\r\n<\/script><\/code><\/pre>\n
JavaScript experts usually advise not to use HTML-DOM properties, such as src<\/code>. Instead, we should create images with a \u2018true\u2019 DOM (a.k.a. DOM Core<\/em>), and set the src<\/code> attribute with the setAttribute<\/code> 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\u2019s another story.<\/p>\n
See the following snippet:<\/p>\n
<script type=\"text\/javascript\">\r\n\/* <[CDATA[ *\/\r\nvar button_on = document.createElement('img');\r\nvar button_go = document.createElement('img');\r\nbutton_on.setAttribute('src','redButtonOn.gif');\r\nbutton_go.setAttribute('src','redButtonGo.gif');\r\nonload = function() {\r\n    var sb = document.getElementById('submit_button');\r\n    if(sb) {\r\n        sb.onmouseover = function() { this.src='redButtonOn.gif'; }\r\n        sb.onmouseout = function() { this.src='redButtonOff.gif'; }\r\n        sb.onfocus = function() { this.src='redButtonOn.gif'; }\r\n        sb.onblur = function() { this.src='redButtonOff.gif'; }\r\n        sb.onclick = function() { this.src='redButtonGo.gif'; }\r\n    };\r\n};\r\n\/* ]]> *\/\r\n<\/script><\/code><\/pre>\n
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<\/a>\u2026<\/p>\n
\"Hellgate:<\/a><\/p>\n
No worries \u2014 for multiple image preload, we\u2019ll just loop all the image sources with a for<\/code> loop. And here\u2019s one possible solution how to handle this:<\/p>\n
var preloaded = new Array();\r\nfunction preload_images() {\r\n    for (var i = 0; i < arguments.length; i++){\r\n        preloaded[i] = document.createElement('img');\r\n        preloaded[i].setAttribute('src',arguments[i]);\r\n    };    \r\n};\r\npreload_images(\r\n    '\/css\/cssimg\/item_listing\/vli_top.gif',\r\n    '\/css\/cssimg\/item_listing\/vli_bottom.gif',\r\n    '\/css\/cssimg\/item_listing\/vli_active_top.gif',\r\n    '\/css\/cssimg\/item_listing\/vli_active_bottom.gif',\r\n    '\/css\/cssimg\/main_layout\/plasma_box_gallery_top_demon.gif'\r\n);<\/code><\/code><\/pre>\n
The above code is best placed in the first external JavaScript file.<\/p>\n
Suggestion<\/h3>\n
\"Hellgate:<\/a> My personal favorite images for the preload array are favicon.ico and the footer.gif, but also fancy checkboxes and radio buttons<\/a> imagery.<\/p>\n
Related posts<\/h3>\n