jQuery Event Listeners

Question

Is there a way using jQuery to add event listeners much like the ones that are available in AS 3.0?

For example, if you load an image, (setting it's opacity to zero so that it doesn't appear on screen) does jQuery have something similar to an onComplete event listener that listens out for when load has completed? Once the load has successfully loaded then you could fire off another function to fade it's opacity back to 1 again.

I've seen a few plugins that have been written, but thought I'd ask a question to see if anyone has found an solution without the use of 3rd party plugins.

Thanks.

you mean something like .load()?

MrOBrian
– MrOBrian

2012-08-13 23:03:15 +00:00
Commented Aug 13, 2012 at 23:03 — MrOBrian
– MrOBrian, Commented Aug 13, 2012 at 23:03

ahren · Accepted Answer · 2012-08-13 23:07:44Z

2

Something like this?

$(function(){
    $("img").hide().load(function(){
        $(this).fadeIn();   
    });
});

The first line is shorthand for $(document).ready(function(){

Then we simply select all the img elements, and hide them and add a load handler to them which fades them in.

Although, if cached the above could prove to be trouble. The below would solve this.

$(function(){
    $("img").hide().each(function(){
        if(!$(this).width()){ // image dimensions are unavailable if it's not loaded
            $(this).load(function(){
                $(this).fadeIn();
            }); 
        }else{ //if the image is loaded already
            $(this).fadeIn();   
        }
    }); 
});

answered Aug 13, 2012 at 23:07

ahren

17k5 gold badges52 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Event Listeners

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related