How to wait for image load from ajax() success data?

Question

I have jquery ajax() function:

$.ajax({
    type: "POST",
    url: 'ajax.php',
    data: 'url='+variable,
    success: function(data){
        $('#mydiv').html(data);
    }
}); 

My ajax response (data variable) is similar to this:

<a id="90" href="mylink"><img src="myimagelink90.jpg" /></a>
<a id="91" href="mylink"><img src="myimagelink91.jpg" /></a>
<a id="92" href="mylink"><img src="myimagelink92.jpg" /></a>
<a id="93" href="mylink"><img src="myimagelink93.jpg" /></a>
<a id="94" href="mylink"><img src="myimagelink94.jpg" /></a>
<a id="97" href="mylink"><img src="myimagelink97.jpg" /></a>
<a id="98" href="mylink"><img src="myimagelink98.jpg" /></a>
<a id="120" href="mylink"><img src="myimagelink120.jpg" /></a>
<a id="121" href="mylink"><img src="myimagelink121.jpg" /></a>
<a id="122" href="mylink"><img src="myimagelink122.jpg" /></a>
<a id="123" href="mylink"><img src="myimagelink123.jpg" /></a>
<a id="124" href="mylink"><img src="myimagelink124.jpg" /></a>
<a id="125" href="mylink"><img src="myimagelink125.jpg" /></a>

So my question is: what's the easiest way to wait for myimagelink#.jpg are all loaded?

Answer 1

Try using the load() function. In this case, you'll need to bind it using the live() handler, as the images are dynamically being loaded:

var loaded = 0;

$('#mydiv a img').live('load', function()
{
  loaded++;

  if (loaded == $('#mydiv a img').length)
  {
    alert('All of the images have loaded.');
  }
});

There might be a more efficient way to do this, so feel free to say how slow this might work.