Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 4 of 4 total
Thread Background Image Loading
Fri, Jul 8 2016 10:09 AMPermanent Link

Eivind

All

I use a lot of graphical content and icons in my app. Also, I like to keep my JS and HTML file as small as possible as some of my users are on very slow internet connections. I only have the login form auto created to keep loading time to a minimum as well. Compression on my IIS server is also on and it's all good.

Obviously I do not load any graphics in my image components at design time to keep the JS and HTML files small. As it is now, as each form is created when the user clicks various menu items, I load graphics from my web server in the image components. All this also works very well until a user sits on a slow internet connection. What happens in some cases is that the form loads, with no graphics in the image components for a short period of time.

I am just trying optimize the image loading process a bit and would love some input in case some of you have done this before. After the user logs in, I create and send them to the Main form / Dashboard. From there on different forms are created based on user clicks. I do not have access to the graphical components in any other form just after the user logs in until they are created the first time. Just now I'm running through my brain two solutions:

1. Once the user is logged in, start creating all other forms that have graphical components in the background so that hopefully all the image components have already had their graphical content loaded once the user clicks the menu option.

2. Assign variables in the main form that hold base64 encoded image data and start loading them with graphics as soon as the main form loads. Once the user request to show a form, I just assign the base64 image data to the image components. Obviously, some mechanism is needed to check weather the base64 variables have been populated in the main form when other forms are requested as the user might click a menu item very quickly and possibly before the base64 data is fetched from the server.

I'm sure there are other options as well to fine tune the graphical loading times. All images are of either JPG or PNG files and they have been compressed to the maximum to keep them as small as possible.

Should you think of any other solutions, I'm all ears.

Br
Eivind
Fri, Jul 8 2016 10:53 AMPermanent Link

Matthew Jones

Eivind wrote:

> 1. Once the user is logged in, start creating all other forms that
> have graphical components in the background so that hopefully all the
> image components have already had their graphical content loaded once
> the user clicks the menu option

I'd be doing a variation on this. But I'm assuming that the browser
cache will work for most images. Have an invisible TImage (or one off
screen) that cycles through a list of images that you know are common.
You can use the OnLoad event to trigger the next one in your list. So
while the user is doing nothing, the browser is pulling in images that
will be sitting waiting for when they are needed. If it hasn't cached
it all in time, the single image at a time won't affect the load much.

--

Matthew Jones
Sat, Jul 9 2016 12:59 AMPermanent Link

Eivind

Matthew

Good idea! Yes, hopefully the majority of the users have cache turned on. I presume the cache is turned on by default in most of the popular browsers?

Eivind
Sat, Jul 9 2016 6:27 AMPermanent Link

Matthew Jones

Eivind wrote:

> I presume the cache is turned on by default in most of the popular
> browsers?

Browsers will cache lots, according to what your web server tells them.
Mostly the server will tell them nothing so they can cache, but the
server can set a time to live in seconds, so have a look at the headers
in something like Chrome to see what yours is sending out.

(For testing you can tell Chrome to not cache things, which can help
sometimes, so check that is set right...)

--

Matthew Jones
Image