CODEWITHSUNDEEP
javascriptimagejquery
Moss
Moss

Reputation: 3803

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 running 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?

Upvotes: 0

Views: 120

Answers (2)

frosty
frosty

Reputation: 21762

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

Upvotes: 1

Alon Eitan
Alon Eitan

Reputation: 12025

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

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

Upvotes: 1

Related Questions