If you want to display your images instantly when the page is loaded, you should
preload your images using JavaScript in the HEAD section of your web page. This
technique also helps when you have rollover effects on your images where you
display a different image when the mouse is over the image.


All you need to do is to create a new JavaScript Image object and set its src
attribute to the path of your image



<head runat="server">
<script type="text/javascript">
var img1 = new Image();
img1.src = '/Images/Product/UISuite.gif';
</script>
</head>

Note that you need to create new JavaScript Image objects for all the images you
need to cache using different local variable names. To overcome this issue, you can
use the following JavaScript function that takes the image paths as arguments and
stores the JavaScript Image objects inside array elements.



<head runat="server">
<script type="text/javascript">
function PreloadImages() 
{
var lenArg = arguments.length;
if (lenArg > 0) 
{
var imgArr = new Array();
for (var i = 0; i < lenArg; i++) 
{
imgArr[i] = new Image();
imgArr[i].src = arguments[i];
}
}
}
PreloadImages('/Images/Product/UltimateEditor.gif','/Images/Product/UltimateSearch.gif',
'/Images/Product/UltimateSpell.gif');
</script>
</head>

This function takes as many image path arguments as you pass, creates a new
JavaScript Image object for each of them and stores them in an array.