WebImageView loads Images very slowly

Targets Web
1

Hi, I’m trying to create a dynamic navigation panel using container controls. I have created a navigation item as a container control with a label and a WebImageView control and I dynamically create each navigation item with an associated icon that changes depending on certain conditions within my app. So I’m programmatically setting the picture property of a WebImageView to a picture that I’ve imported into my application.

Sub LoadNavigation

AddRow “Row1”, notes
AddRow “Row2”, journal
AddRow “Row3”, attachments

End Sub

Sub AddRow (Title As String, Icon As Picture)

Dim Row As New ccToolbarItem

Row.lblTitle.Text = Title
Row.imgItemImage.Picture = Icon
Row.Style = styNavItem

Row.EmbedWithin(Self, 0, (Rows.Ubound + 1) * (RowHeight + RowSpace), Row.Width, RowHeight)

Rows.Append Row

End Sub

The application works fine and does what I want but the icons load extremely slowly, particularly over the web. The icons are tiny (400 bytes each in png format) but if I create 7 or 8 navigation panels, the panels are created instantIy at the browser but I can wait 5-6 seconds for the icons to load.

Here’s an example: -
http://31.193.137.165:8080

Any suggestions?

Thanks

2

This is one of those cases where you would typically come up with some way to preload the images to the browser and then just tell the browser to swap in an image when it needs to be displayed.

In your case where you have some icons, presumably the same size, it might be best to make them all one image and use some javascripting of css attributes to let the browser know which portion of the image to display. This is a very speedy way to do it.

Off the top of my head I’m not quite sure how it would go in Xojo, but my guess is you would have some execute javascript command where you are now changing the image. So the image value would never change, but the execute javascript would set the position of the image.

Not sure if this will work with the imageview control as is or it would need a custom control but it shouldn’t be too hard.

Check this link to get a basic understanding of the technique.
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_backgroundposition3

3

[quote=80811:@Tim Knibbs]The application works fine and does what I want but the icons load extremely slowly, particularly over the web. The icons are tiny (400 bytes each in png format) but if I create 7 or 8 navigation panels, the panels are created instantIy at the browser but I can wait 5-6 seconds for the icons to load.

Any suggestions?[/quote]

I have noticed that image display is faster when the pictures are entered as url rather than files. You could upload all your pictures on your server and then reference them as URL in the IDE.

Kevin Windham idea of having all the icons on one image is another lead. You could have one transparent image with all the icons overlaid on top of the blue rows. From what I can tell, display from a URL of a picture of the same dimensions is close to instant , certainly much faster than your demo.

4

Kevin/Michel, thank you for your replies. I’ve created an Images folder on the server and I reference the images via the URL and this is instant!

Thanks again!

Tim