IMPROVED jQuery Image Preloader with Rollover Effect (dynamic extensions supported)

This post expands on my original jQuery Preload and Swap Navigation Images post. The original code required you to enter the file extension (eg: jpg, png, gif). The modifications below make this jQuery hover/rollover/swap code totally dynamic 🙂

$(document).ready(function() {
 //preload images
 var preloadedImages = new Array();
 $('#container img').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
 $('#container a').hover(function() {
 var ext = $(this).find('img').attr('src').split('.').pop();
 $(this).find('img').attr('src', $(this).find('img').attr('src').split('.' + ext).join('-hover.' + ext));
 }, function() {
 var ext = $(this).find('img').attr('src').split('.').pop();
 $(this).find('img').attr('src', $(this).find('img').attr('src').split('-hover.' + ext).join('.' + ext));
 });
});

The only significant change from my original code to grab the file extension (var ext = value) before preloading or swapping the images…

The way I decided to do this was to split the string by into an array by ‘.’ and “pop” the last element. This also ensures that the extension length does not become an issue (‘.jpg’ and ‘.jpeg’ will work)

Now the preloader and rollovers can be used for ANY element with markup similar to…

<div id="container">
 <a href="page1.htm"><img src="images/page1btn.jpg" alt=""></a>
 <a href="page2.htm"><img src="images/page2btn.jpg" alt=""></a>
 <a href="page3.htm"><img src="images/page3btn.jpg" alt=""></a>
</div>

The script simply looks inside of anchor tags for an image to apply the effect to. Common with image-based navigation.

Feel free to comment 😀

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

  1. 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!

    1. 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));
      	});
      });
  2. 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?

    1. 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) 😉

  3. 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';

Leave a Reply

Your email address will not be published. Required fields are marked *