Sunday, August 29, 2010

Wait till a dynamically loaded image fully load using jQuery

I had this problem when I was creating simple jQuery gallery with thumbs. Once the thumb is clicked I wanted to wait till the image is fully loaded until I called the fadeIn.
we can use jQuery load to achieve this.

$('#image').hide();
$('#image').attr("src", image); //next image path
//still in hide
$('#image').load(function() {    
    $('#image').fadeIn('slow');
});        


4 comments:

  1. does this mean that this script will wait for the image to be fully loaded and rendered?

    ReplyDelete
  2. yes, load function will wait till the image is fully loaded

    ReplyDelete
  3. Great post, this helped, although I switched the define load function before I set the image source. This prevents a race condition. Just a suggestion :)

    $(img).hide();
    $(img).load(function() {...});
    $(img).attr(...);

    ReplyDelete