My research on how to easily preload a web page’s images that are referenced in attached stylesheets as background images led me to Filament Group’s jQuery plugin for the same. It is easy to incorporate and works like a charm since it can pull images and preload them from any directory. While CSS sprites is an option and a relevant one at that for this purpose, it has its limitations and is also time consuming. Moreover there can be scenarios where the design and effect required is such that CSS sprites is not the solution.

Quite often we use background images for rollover states, links, buttons and other display elements including modal windows. From real life scenarios, we know that images that are not visible initially but need to be visible when an event happens (like a mouseover or a button click) can take a while to appear and that can take away from the user experience and even confuse the user. To avoid delays in image loading after the site has loaded, it is important to preload images. This plugin automatically creates an array of image URLs mentioned in a site’s style sheets and keeps them ready in the cache.

The plugin’s usage is a breeze. To begin with you need the jQuery library referenced. Download and reference the preload plugin file from here within the script tag. Finally, write the following one line of jQuery within the script tag :

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

That is it!

—-
Related download : Preload CSS Images plugin

Latest posts by Smarajit Dasgupta

  • Share/Bookmark