Question

On page load, my image slider takes a second or two to load, and the shading image below it appears immediately(very small file size as compared to the slider image). You can see it here: homepage

I would like the shading image to load only after the slider image has completed it’s load. It would be even nicer to apply a nice elegant fade in effect once the first slider image completes it load.

I can’t seem to figure out how to write this in jquery. Any help? Thanks!

Answer 1

You can use the images onload event.

Using jQuery it would look like

$('#image_id').load(function() {
     $('#div_id').fadeIn('fast');
});

If you’re inserting the image(s) dynamically you can just put that into the creator object:

$('<img>', {
    src:   '/myimages/foo.jpg',
    id:    'bar',
    load:  function() {
        $('#div_id').fadeIn('fast');
    }
}).appendTo(#somewhere);

Ref.: .load()
Example: http://www.jsfiddle.net/4yUqL/20/