Question

I’m using AJAX to get data for several business-card like divs on my page (number depends on query). The divs contain simple text and fixed space for images (200x200px). Of course images are mostly smaller and by default aligned to top.

I tried aligning method with .load() function, but it loads all the images and later positions them, so the movement is visible. I tried hiding loaded images, position them and later showing, but with fast reloads it looks like the images are ‘blinking’…

Is there any way to align multiple images vertically in the centers of containers in a way that it looks good and user can’t see that anything happens to the images?

Any help would be greatly appreciated, I coudln`t find any good solution on the web.

Oh, and of course I don;t know the size of the images before they load so usual methods using image size are not working (depending on how many images are fetched sometimes .height() works and sometimes it returns 0).

EDIT: Ok, I`ve found solution to set my image as background of the div. It still blinks sometimes but I can manage.

Answer 1

Ok, I`ve found solution to set my image as background of the div. It still blinks sometimes but I can manage.