Execute jQuery code when images have loaded from external resource

Question

Hi all,

I'm getting users profile pictures from Facebook so their loading time varies quite a lot. When they have loaded I want to resize them. I have the resizing code working OK, but cannot get the actual code to execute reliably at the right time. According to the info I've found this should work:

$('.userPic').load(function () {

... code to resize pictures

});

But it doesn't seem 100% reliable. Any other hints or tips?

Thanks Nick Swan

Answer 1

This is strange, when page has finished loading, it has also loaded all internal and external resources. Check to make sure that if jquery gives you its width, if so, it is loaded:

$('.userPic').load(function () {
  if ($(this).width()){
    // resize code....
  }
  else{
    // still loading....
  }
});

The width() gives the calculated width which is possible when image has successfully loaded.

Update

Use the load even instead of ready handler to make sure that all images are loaded before your code runs:

$(window).load(function(){
  // your code here.......
});