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.
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 Your images will load in microseconds verses seconds
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.
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 if only using a few images, this would be the fastest method both for the user and the developer
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 cant make a url to the Shared Documents Folder…thats 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.