Tag Archives: preloader

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… Continue reading

jQuery Preload and Swap Navigation Images

UPDATED CODE: IMPROVED jQuery Image Preloader with Rollover Effect (extension independent)

I have been researching Javascript libraries quite a bit lately and have decided on jQuery. Don’t ask me to say why it is better or worse than the other libraries out there. After reading the documentation I just happen to prefer it.

Suprisingly enough, one of the most common things Javascript is used for is navigation rollovers. Swapping an image source using markup attributes such as onmousover and onmouseout is not difficult by any means. We have all done it the “old” way and most of us still do, but there is hope!

I normally use unordered lists for my menus, but for simplicity’s sake, and no need to reference CSS rules, here is an example of a very basic menu.

<div id="navWrapper">
 <a href="page1">
 <img src="../assets/images/page1.png" /></a>
 <a href="page2">
 <img src="../assets/images/page2.png" /></a>
 <a href="page3">
 <img src="../assets/images/page3.png" /></a>
</div>

Now what we would usually do is add “onmouseover” and “onmouseout” events to each anchor (link) and an “id” attribute to each anchor’s child image. Wouldn’t it be great if we didn’t have to clutter the (X)HTML with javascript? There must be a better way… this is the thought that started me on my introduction to jQuery 🙂

Using only the markup above and the Javascript referenced below, we can achive the same result of my previous Javascript image preloader/swapping function post. Continue reading

Javascript Image Preloader with Image Swapping Function

In this post you will find a simple image swapping function that will work for all images that need a hover effect.

The ‘img’ argument is required of course. I can either be a reference the the image object itself (eg: swapImg(this)) or a string (eg: swapImg(‘ImageID’)) if calling the function from somewhere other than within the <img> tag. If no arguments are passed, it aborts execution. If a string is passed, we first make sure that getElementById is supported. Then we check to make sure the ID passed is valid, of not we return.

After ‘img’ has been checked and confirmed, we move on to the 2 optional arguments. The ‘find’ argument (case-sensitive) indicates the string we are looking for at the end of the image src attribute. If the string is found, we know that the image is currently in the ‘over’ state and we replace ‘find’ with ‘repl’ to return the image back to it’s normal state. On the other hand, if ‘find’ is not located, we rebuild the src attribute and insert ‘repl’ at the end of the image url (before the file extension) to activate the hover state. Continue reading