Problem when loading images with AJAX

I'm using a jquery plugin to load images from flickr. I'm trying to distribute these images into 3 columns as they come in, the goal being to place each image in the shortest column so that the columns are close to equal length at the end.

The script works great most of the time in IE. It was less dependable in Firefox but seems better now. In Chrome however it totally fails. I have narrowed the problem down to the fact that while the script is r开发者_运维百科unning it thinks the images have zero dimensions. The dimensions don't appear until some later point, but I want to distribute the images as they come in, not do a big reshuffle at the end. Why does occur even when I use the Image object? And how can I get around this problem?

---

var myimg = document.getElementById('myimage');

if I give this dude a new source, the img.onload event will fire, so I need to put the code that should fire after load in the onload event handler.

myimg.onload = function(){
    //do some crap
}
myimg.src = someAjaxCall();

---

maybe you should try to get the image dimantion with the load() event

$('img').load( function() {
   alert( $(this).width() );
});