I find JQuery to be really lightweight and a very useful framework for JavaScript awesomeness. Keep up the good work!

Ben Lacey (Lacey Tech Solutions)

<div id="loader" class="loading"&rt;
    <img src="image.gif" /&rt;
</div&rt;

$(function() {
    $('#loader img').hide().load(function() {
        $('#loader').removeClass('loading');
        $(this).fadeIn();
    });

    // This makes it work, even when the image is cached
    var src = $('#loader img').attr('src'); // Stores original src from HTML as a variable
   $('#loader img').attr('src', '') // Set's source to empty string
   $('#loader img').attr('src', src) // Sets it back to the old value

    // BELOW IS AN ALTERNATIVE WAY TO MAKE IT WORK FOR CACHED IMAGES
    $('#loader img').hide();
    $(window).load( function() {
        $('#loader').removeClass('loading');
        $('#loader img').fadeIn('slow');
    });
});

I only tested the two solutions in FireFox, so I’m not entirely sure how well it will work cross-browser. Hope it helps someone.

Although, I suppose for some more advanced applications of this concept, the src would need to be originate dynamically from the javascript anyways =D

First and foremost this is a great piece of work you have provided us with, thanks very much.

I was wondering if you could or someone could help me with one problem Im having, I cant get the image fade to work on this page http://kylehouston.com/new/index_new.html everything else works fine.

Thanks in advance

Kyle

I hear that swapping images is territory to tread lightly when it comes to Webkit browsers, but I’ll cross that bridge when I come to it…it’s good for now :D

Take care.

thank you for this great tutorial. Could you just tell us how to stop the loading? Because I have to override the loading, and I can’t stop the first load. So my complete callback are called 2 times and not 1….

thank you for your help!