Best Way to Load Images/Controls

To start off with my web app functions as a web based UI in a similar fashion to my desktop app. The number of controls can vary from installation to Installation. It is not a “fixed” content type app.

The main page consists of a number of WebImageView subclasses. These are relatively small size - 125 x 132 pixels. These each obviously need a picture (and the picture gets changed during the operation of the app as well). In my case where I am testing, I have 12. But actually installation sites could have 50 or 75 or more.

Now for the possible images that could get loaded to these WebImageViews, it could also be any potential number. In my case, I believe I have 9 different images that could get loaded. The images are not very large - icon type sizes typically and are maybe something like 24k in size. I want to cache all of them to the web browser. So in the open event of the page, I have a routine that pulls the images out of the database where they are stored and saves them in an array of WebPictures on the page. That should cache them to the page.

I then create the WebImageViews and place them on the page and in that process - I load the picture. I am finding that in my case loading everything takes me about 9 seconds to display all the WebImageVIews with their icons. The creation times for the controls (the time between when the open event of the control fires to the time the shown event of the control finishes) varies quite a bit. It can be anywhere from 250 mS or less to a full 10 or 11 seconds. Seems like the first controls get created faster and the later ones slow down. It total it takes about 9 to 11 seconds for me to show the full page. That’s with just 12 controls. More controls will obviously slow things down further.

Now, if I have an icon set in the IDE for the control - that shows much more quickly. But that is really only going to be a place holder. I’m trying to understand why it takes so long to display things. Is this just how things are with using a browser? This is all taking place on a LAN by the way. No internet for this.

The other thing is that the PictureChanged event for each WebImageView fires twice. I have not been able to figure out why. My call to change the image only happens once. So I am thinking the framework is doing that. The first time the PictureChanged event fires, the image is not cached. The second time it fires, the image is cached. So I would like to eliminate that first event from firing but I’m not sure that is possible…

So really what is the fastest way to load my images? I know this is somewhat lengthy but thought I would explain in detail so to show what I am doing. I want to get all the images loaded to the browser and then I’d like to just pull from those cached images when loading the controls. Changing the image on the control once it is created and on the page is instantaneous. It’s getting it loaded the first time that I really want to speed up.

Ideas appreciated!

A couple more comments…

  • Running the web app compiled loads the controls a heck of a lot faster. It’s now a couple seconds as opposed to 10 seconds. Running in the debugger is much slower.

  • Opening the page on a different device loads the controls very fast. Seems like there’s some internal caching done on the server as well. So I am wondering what is done where.

  • The reconnect feature in r2 is amazingly cool. I can quit the web app and when I start it up again, the pages automatically reconnect and refresh. That is awesome!

If the images are hosted, then use the URLs to load the images…Allowing the server instead of the Xojo application to render up the images will reduce application CPU usage and your entire Xojo application will render much more smoothly. You can even pre-load/prefetch images so they stay cached to prevent unnecessary bandwidth usage when loading the same image across multiple pages :slight_smile: Your images will load in microseconds verses seconds :slight_smile:

Sorry, I wasn’t clear. The images are not hosted. If they were your suggestion would be a good one.

And actually, there’s a tremendous speed difference between running a web app in debug from the IDE vs. running a compiled version. I’m loading the page in a couple seconds now. Very acceptable. Surprising that debugging slows things down so much.

I merely made the suggestion out of experience of having many simultaneous app users(a few dozen)…The speed decreases rather quickly. In the organization I work for, we have a web app served up behind a local intranet server (using the free abyss tiny server) to render images, JavaScript, and any external web app resources; it reduced load times and sped up productivity noticeably :slight_smile: sometimes we even include a helper service app with web applications that acts as a webserver to only serve up requested files to the web app to reduce web app CPU usage :slight_smile: Just a few tricks of the trade we’ve used in large scale applications to make Xojo respond as quickly as or quicker than competitor development-ware. I’ve seen amazing Xojo web apps turn into snails once many concurrent connections are present. Any way that you can reduce the workload for the web app, will greatly benefit the end user in the end.

i like to learn more about the helper service app that act as a web server to serve up files/images.

Apologies for the delay Richard. I have uploaded a full demo for you. :slight_smile:

Loading Web Application Resources From a WebHelperService Application

[quote=349477:@Jon Ogden]A couple more comments…

  • Running the web app compiled loads the controls a heck of a lot faster. It’s now a couple seconds as opposed to 10 seconds. Running in the debugger is much slower.

  • Opening the page on a different device loads the controls very fast. Seems like there’s some internal caching done on the server as well. So I am wondering what is done where.

  • The reconnect feature in r2 is amazingly cool. I can quit the web app and when I start it up again, the pages automatically reconnect and refresh. That is awesome![/quote]

I was looking at some old projects and remembered that
there is a .Prefetch method to pre-load and cache the images natively in Xojo for added optimization…Or load the images as WebPictures into an array; possibly a global array if the images will be there same for all users, otherwise create an array in the user Session of WebPictures if they are specific only to the user :slight_smile: if only using a few images, this would be the fastest method both for the user and the developer :slight_smile:

I have a similar question. My apps show a single, fairly large image (640x480) per page. About 8-10 pages. These are hosted in a folder in the “shared” folder on the cloud server. They are loaded by image name and converted to web pictures. Should these be loaded by url? If so, how to make the url?

You can’t make a url to the Shared Documents Folder…that’s kinda the point. If you need them to be accessible to the web, put them next to the app or in a folder therein. Then just use the app url + foldername + imagename.