Question

I have put a sort of rudimentary preloading animation together with jQuery. You can see it on my site at element17.com. As you can see, a preloading animation plays until $(window).load is called, at which time that (called ‘.loading’) fadeOut()’s.

That seems to work fine, but you’ll see that it basically fades out to transparent, at which time the images that were loading snap into existence. How can I set this up so that that preloading animation fades smoothly into the images?

HTML follows:

<div class="loading" style="height:150px; width:475px; z-index:99955; background:#333 url('plog-content/themes/diffuser/images/loading.gif') no-repeat center center;">&nbsp;</div><div class="slideshow">*IMAGES LOAD HERE VIA PHP*</div>

Please excuse the inline styles while I’m testing… 😛

Thanks everyone!

Answer 1

I have done this on a project before by preloading the images and automatically hide them, then fade then in.

i.e.

function preloadBackgroundImage(){
    $('img[data-preload]').each(function(){

        var image = $(this);
        var filename = image.attr('src');
        image.attr('src', '');
        image.load(function(){
            image.hide();
            image.fadeIn(600);
        }).attr('src', filename);
    });
}