1

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!

JCHASE11
  • 3,901
  • 19
  • 69
  • 132

2 Answers2

3

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/

jAndy
  • 231,737
  • 57
  • 305
  • 359
1

You can do an onload on the image.

Use jQuery to bind the onload onto the slider's images and hide the shadow by default.

$('#img').bind("load", function() {
    $('#theshadow').show();
});

Of course you will need a way to do this with your slider (which has multiple images and other features). But the load event on the image should be what you want.

See this, it is related

Community
  • 1
  • 1
Bob Fincheimer
  • 17,978
  • 1
  • 29
  • 54