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.

Answer 1

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();   
        }
    }); 
});