CODEWITHSUNDEEP
jqueryimagepageload
JCHASE11
JCHASE11

Reputation: 3941

Load a div once image is loaded using jquery

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!

Upvotes: 1

Views: 347

Answers (2)

jAndy
jAndy

Reputation: 236022

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/

Upvotes: 3

Bob Fincheimer
Bob Fincheimer

Reputation: 18056

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

Upvotes: 1

Related Questions