Pre-loading (pre-fetching) images used as ThemeResource

Is there a way to pre-load (pre-fetch) a bunch of images that will be used in the app so that they’re not loaded on-demand when the page is painted? This would really improve perceived performance. Right now I have a set of buttons that have images as icons that you can watch load (takes 1/3-1/2 second to load all of them because of the initial connection).


Does nobody else have this problem? Still looking for a solution.


One dirty but easy way I could think of is to use the executeJavascript method like so:

A cleaner approach which might require a bit more work would be to create an addon which you give the Resources to and it translates the urls and does the same thing like above directly on the client side. A bit more work but shouldn’t be too difficult either.

Another hack, if the problem is the GET request performed to load the image. Just as a quick thought, you could load your images normally, but with CSS style display: none; Then after some time using e.g. Refresher add-on remove that style so the images are displayed, but no GET request is made at that point.

I don’t know if it is part of your problem, but I have seen the advice to put resources outside of the jar, so Tomcat (or similar) doesn’t have to extract them each time. The idea is to serve them by a regular Web server like any plain HTML page do.
Of course, you can also check the size of your icons: if they are PNG, for example, there are some tools to crunch them to small size. Often they are 24 or 32 bit depth, when 8 bits are usually more than enough.

And indeed, using JavaScript to pre-fetch the images and put them in the cache of the browser can be a good idea too.