List of thumbnail images performance problem

General
1

I have a set of thumbnail images which are shown to the user in a gridlayout. This list can contain up to 50+ images.
If the list contains more then ±10 images, it takes quite some time (2-4 seconds) to display the whole list.
Is this normal behaviour or is there a more efficient solution for this problem?

I’m using Vaadin 6.6.5, IE8/Firefox 6.

[code]

GridLayout gridLayout = new GridLayout(5, 1);

gridLayout.setMargin(true);
gridLayout.setSpacing(true);
gridLayout.setSizeFull();

Set thumbNailSet = getThumbnails();

for(final Embedded thumbNail: thumbNailSet){

thumbNail.setStyleName("thumbnail");

thumbNail.addListener(new ClickListener() {
			
	@Override
	public void click(ClickEvent event) {
		// action when clicked on thumbnail
	}
});
		
gridLayout.addComponent(thumbEmbedded);

}

this.setCompositionRoot(gridLayout);

[/code]

thanks,

Johan

2

Hi Johan,

i can’t know what are your motives for using GridLayout, but based on my earlier experience I would recommend to avoid it as much as possible and stick with lighter layouts like HorizontalLayout / DashLayouts / CSSLayout / CustomLayout. Also keep on mind that web browsers are in default configuration restricted to open limited amount of parallel connections to server (2-3 iirc), thus fetching large amount of individual resources may and will take some time. Nevertheless it shouldn’t hold back the whole page skeleton from showing up initially and being gradually finalized with raw image data later on.

For reference, I have implemented a kind of thumbnail panel using slick CSSLayout and am happy with how it performs. Probably haven’t went as high as 50 images in real life scenario, but surely did some 20-30.

Tomas

3

Thanks very much.

This works fine if all thumbnails have exact the same size.
But I have images in landscape and portrait mode (all having a maximum width or height of 100px). The layout is mess in this case:

So I should be able to style it somehow. Any idea?