Preloading Images
There are a couple options available to a web designer when it comes to preloading images. In the recent past, the most common way was to do it through Javascript (as shown in Example 1), but when the paranoia about cross-site scripting exploits using Javascript started gaining publicity, a fair percentage of the web-saavy community disabled Javascript, which can and has seriously crippled the functionality of many websites. The only viable alternative, with which all modern browsers support is through CSS (as shown in Example 2).
Example 1 (Javascript)
{code type=html}<script type=”text/javascript” language=”JavaScript”>
imgLogo = new Image();
imgLogo.src = “logo.gif”;
</script>{/code}
Example 2 (CSS)
{code type=css}<div style=”display:none;”>
<img src=”logo.gif” height=”150″ width=”350″>
<img src=”logo_rollover.gif” height=”150″ width=”350″>
</div>{/code}
Note: With both examples, the code has to be placed as early in the document as possible. With CSS, it should be placed after the <body> tag, and with the Javascript, it should be placed between the <head> tags.
No comments