7 thoughts on “IMPROVED jQuery Image Preloader with Rollover Effect (dynamic extensions supported)”

1. borzale April 26, 2011 at 8:07 pm

   I found your script on google and have found it to be extremely useful! Haven’t had any problems with it so far and the preloader works great.

   I have slightly modified it so it can be applied to any element with a “src” attribute with the class “rollover”. I had a couple of image input elements I needed to have rollovers too.

   Here is the link for anyone who might find it useful: http://borzale.com/public/js/hover.js

   Cheers mate!

   Reply ↓
   1. Robert Mullaney Post authorJuly 20, 2011 at 12:33 pm

      Here is borzale’s code…

      /*
      	Awesome preloading image rollover script from:
      	http://www.robertmullaney.com/2011/01/14/improved-jquery-image-preloader-rollover-effect/
      	
      	Slightly modified by borzale @ borzale.com so this script can be used on any element with a "src" attribute.
      	
      	Usage:
      	 - Apply ".rollover" class on desired element. The element must have the "src" attribute (go figure).
      	 - Save image rollovers with -hover at the end of the name.
      		eg: Hover image is saved as myimage-hover.jpg
      */
      $(document).ready(function() {
      	//preload images
      	var preloadedImages = new Array();
      	$('.rollover').each(function(i) {
      		preloadedImages[i] = new Image();
      		var ext = $(this).attr('src').split('.').pop();
      		preloadedImages[i].src = $(this).attr('src').split('.' + ext).join('-hover.' + ext);
      	});
      	//rollover effect
      	$('.rollover').hover(function() {
      		var ext = $(this).attr('src').split('.').pop();
      		$(this).attr('src', $(this).attr('src').split('.' + ext).join('-hover.' + ext));
      	}, function() {
      		var ext = $(this).attr('src').split('.').pop();
      		$(this).attr('src', $(this).attr('src').split('-hover.' + ext).join('.' + ext));
      	});
      });

      Reply ↓
2. Robert Mullaney Post authorApril 26, 2011 at 8:22 pm

   I have written new code that uses the same method. The only difference is I used existing selectors instead of adding a new class.

   Example:

   $('#nav a img, input[type="image"]').hover(function() {
   	...
   }, function() {
   	...
   });

   To make sure others see your version, do you mind if I post your code here in case the linked file is ever (re)moved?

   Reply ↓
3. Deb Gray May 3, 2011 at 11:08 am

   If using this for navigation, how could I add a selected state to use the same image as hover?

   Reply ↓
   1. Robert Mullaney Post authorMay 3, 2011 at 11:23 am

      Just add class=”current” to the “img” tag and include something like this to set the image during page load…

      $(document).ready(function() {
      	//initialize "current" nav image in "hover" state
      	$('#container img.current').src = $('#container img.current').attr('src').split('.' + ext).join('-hover.' + ext);
      	//preloader and hover code goes here
      });

      Code hasn’t been tested but should achieve what you’re looking for. It will reverse the mouseover to the “current” image. If you want to avoid that, just add another hover event for that image that does nothing (eg: return false) 😉

      Reply ↓
4. borzale May 15, 2011 at 7:16 pm

   Yeah no worries mate, post away!
   Thanks again for the script.

   Reply ↓
5. Robert Mullaney Post authorOctober 18, 2011 at 1:44 pm

   One thing I forgot to mention for some who may not be JS savvy… if you need to manually preload an image after processing the automated ones, you can include this snippet later further down and duplicate it as needed for additional images.

   // manually preload an image
   preloadedImages[preloadedImages.length] = new Image();
   preloadedImages[preloadedImages.length - 1].src = 'path/to/someimage.gif';
   preloadedImages[preloadedImages.length] = new Image();
   preloadedImages[preloadedImages.length - 1].src = 'path/to/anotherimage.jpg';

   Reply ↓