Image preloading techniques deeply

For better display and visitor interaction, image preloading must be implemented in some cases. We can preload image following two techniques:

1.Using JavaScript
2.Using CSS

Using JavaScript :

The simplest way to preload an image is to instantiate a new Image() object in JavaScript and pass the URL of the image you want to preload.

For example, if you want to preload an image, simply create a new JavaScript Image() object and place the script in the head section of the page to ensure it runs as soon as the page loads.

<script type="text/javascript">
Image= new Image();
Image.src = "pic1.jpg";
</script>

Preloading Image with JavaScript array

In practice, you will need to preload more than just one image to smooth effect on image rollovers. A JavaScript array of images can be preloaded as:
<script type="text/javascript">
     images = new Array();
     images[0]="pic1.jpg";
     images[1]="pic2.jpg";
     images[2]="pic3.jpg";
    imageObj = new Image();
     // start preloading
     for(i=0; i<images.length; i++)
     {
          imageObj.src=images[i];
     }
</script>

Preloading Image with jQuery

Image preloading which is pretty simple with jQuery is the solution. The code snippet that is around the Internet for some time provides image preloading:

jQuery.preloadImages = function() {  
     for(var i = 0; i<arguments.length; i++)  
    {
          jQuery("<img>").attr("src", arguments[i]);  
    }
}
In order to use the above function, an array of image urls should be provided:
$.preloadImages("image.gif", "/themes/images/BD/image2.png", "/themes/images/BD/flicker.jpg");

Using CSS :

Image preloading with CSS can be achieved by a simple <div> with style "display:none;" containing all <img> tags of images to be preloaded.

<div style="display:none;">
  <img src="/images/imageA.jpg" >
  <img src="/images/imageB.jpg" >
</div>

The CSS preloading code must be in the BODY area of the HTML code. It will not work in the HEAD section. The optimum position depends on how the preloaded images will be used. If the images will be used sometime after the web page has finished loading, the preload <div> can be placed below the page content. If the images will be used immediately, such as automatic background image change, the preload <div> should be placed on the top section of the BODY area.

Now compare these two methods to understand the safest and easiest method for preloading images:

Preloading with JavaScript

In order to preload images with JavaScript, browsers should support JavaScript and it should be turned on. Without JavaScript, the preloading will not happen and each time the image is needed, it will be fetched. If the preloaded images will be used on image effects such as rollovers or other effects that require JavaScript, preloading with JavaScript is the best choice. That way, for browsers that are not supporting JavaScript, the images will not be preloaded. 

The JavaScript preloading code can be placed anywhere in the page including the HEAD area of the page. If all preloading is done with JS, most of the search engine spiders won’t index the images.

Preloading with CSS

Preloading with CSS will work even if the browser’s JavaScript is turned off. The CSS preloading section should be placed in the BODY of the HTML. 

Search engine spiders index the images when they are preloaded with CSS.

Notes on Image Preloading:

Users with slow Internet connection speeds will navigate away if you preload too many or too large images before page content is displayed. 

The JavaScript and the CSS/HTML image preloading code can be used on the same web page at the same time.

Both techniques can be used more than once on the same web page to preload additional images at different points.