Pre-loading images is the key point to prevent the flickering while rendering a cool JavaScript driven animation, rollover, Ajax loader or toggle effect. If the script which is replacing an image pauses to wait for another image to load, the effect became useless. Image preloading which is pretty simple with jQuery is the solution:

PRELOADING ARRAY OF IMAGES:

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"); 

PRELOADING CSS IMAGES WITH JQUERY

I’ve just discovered another jQuery function (plug-in) that pre-loads images which are referenced in CSS files. The script from the Filament Group iterates through each rule in stylesheets attached to the page and if a rule contains an image URL, it loads the image ensuring it’s available before using it.

Download the plug-in

To use this plugin, call $.preloadCssImages(); when the DOM is ready. Like this:

$(document).ready(function()
{   
     $.preloadCssImages();
}); 

Related posts

Image Preloading Deeply - CSS/Javascript/jQuery

Browsers load images after an HTTP request is sent for them either by tag or through a javascript call. If you have a javascript function that changes an image on mouseover, you have to wait while the image is retrieved from the server. This would be disturbing when users have a slow internet ...

Image Preloading with Javascript

Image Preloading is a technique, often used in navigation graphics and image rollovers, to load images and put them in the browser's cache before they are needed. In this post, we will focus on the Javascript technique to implement image preloading.

How to: Image Preload: Javascript (jQuery) or CSS – Comparing the techniques

For better display and visitor interaction, image preloading must be implemented in some cases. Previously we focused on two techniques to achieve image preloading in the following posts:Image Preloading with Javascript,Preloading Images Using CSS. Th's article compares these two methods to underst...

Comments

Add comment