I have a help screen which is displayed by clicking a button in my pano's toolbar. The help system includes an image which is declared in a layer which is within an outer layer with type="container". The initial state of the container is visible="false", and clicking the button toggles this visibility to "true".

It seems that the help image does not actually get loaded until the button is clicked, however, presumably because initially the container is set to be not visible, as there is a noticeable delay after clickiing the button for the first time before the image appears. On subsequent clicks the image appears immediately because by then it is held in the browser's cache.

To overcome this I have set the initial visibility of the container to "true" but its alpha to "0". I have then added to the declaration of the image an onloaded event which calls an action which sets the container's visibility to "false" and its alpha to "1" after a very brief delay.

This works, and the help image is already downloaded and ready the first time the button is pressed. This seems a heavy handed approach to what I would have thought would have been a simple problem to overcome. Am I missing something much simpler, please?

Regards

Andrew

Hello Alexey

Thanks, but no, that doesn't work. The image still doesn't preload.

Regards

Andrew

Hans, you are absolutely right. The image is downloaded even with visible=false. I've just done a test using the krpano Testing Server with the server log enabled and the download speed limited to 64kb/sec so that I can more easily watch what happens.

The help image is helptext_d.png, highlighted in red, below, and here is the server log after submitting the pano's html file to the Testing Server -

19:07:03 /test1.html
19:07:03 /test1/tour.js
19:07:04 /test1/tour.xml
19:07:04 /test1/skin/vtourskin.xml
19:07:05 /test1/panos/kitchen.tiles/preview.jpg
19:07:05 /test1/panos/kitchen.tiles/pano_f.jpg
19:07:05 /test1/skin/vtourskin.png
19:07:05 /test1/skin/vtourskin_thumbborder.png
19:07:05 /test1/plugins/scrollarea.js
19:07:05 /test1/skin/helpbox_close.png
19:07:05 /test1/skin/helptext_d.png
19:07:05 /test1/panos/kitchen.tiles/pano_u.jpg
19:07:05 /test1/plugins/scrollarea.js
19:07:05 /test1/skin/vtourskin.png
19:07:06 /test1/panos/kitchen.tiles/pano_l.jpg
19:07:06 /test1/panos/kitchen.tiles/pano_r.jpg
19:07:15 /test1/panos/kitchen.tiles/pano_d.jpg
19:07:15 /test1/panos/kitchen.tiles/pano_b.jpg

At this point the pano was fully loaded and waiting for user interaction. I then clicked the help button to display the help image and the following was added to the log -

19:08:26 /test1/skin/helptext_d.png
19:08:26 /test1/skin/helpbox_close.png

So it appears that even though the image had been previously downloaded the browser seems to have forgotten about it and fetched the file again when I clicked the button, with a resulting wait for the image to appear.

The above was with html5:"prefer" set in the html file so that HTML5 was used . When I change this to html5:"auto" so that the pano is displayed with Flash I get the following in the server log -

19:01:18 /test1.html
19:01:18 /test1/tour.js
19:01:20 /test1/tour.swf
19:01:22 /test1/tour.xml
19:01:22 /test1/skin/vtourskin.xml
19:01:22 /test1/panos/kitchen.tiles/preview.jpg
19:01:22 /test1/skin/vtourskin.png
19:01:22 /test1/plugins/textfield.swf
19:01:22 /test1/skin/vtourskin_thumbborder.png
19:01:22 /test1/plugins/scrollarea.swf
19:01:22 /test1/skin/helptext_d.png
19:01:22 /test1/skin/helpbox_close.png
19:01:23 /test1/panos/kitchen.tiles/pano_f.jpg
19:01:23 /test1/panos/kitchen.tiles/pano_r.jpg
19:01:33 /test1/panos/kitchen.tiles/pano_u.jpg
19:01:33 /test1/panos/kitchen.tiles/pano_l.jpg
19:01:33 /test1/panos/kitchen.tiles/pano_b.jpg
19:01:33 /test1/panos/kitchen.tiles/pano_d.jpg

Again, I clicked the help button at this point, but this time nothing further was added to the log, and the help image appeared immediately. Note the different order in which the pano tiles were loaded. Does that have any significance?

My method outlined in my original post seems to get round the problem with HTML5 so that the browser knows the image is already downloaded and doesn't call for it again, but does anyone have any ideas if there is a better way, please?

Regards

Andrew

But why doesn't the browser use the already downloaded image in HTML5? Is this a problem with the krpano viewer or with the browser? Is there a recommended way to overcome this?

Any thoughts on this would be much appreciated, please.

Hello Hans. Aha, I see what you mean. I do see a delay of perhaps two seconds in the HTML5 version where the image file name appears again in the server log after I click my help button (I limited the download speed in the krpano Testing Server to exaggerate any loading times). In Flash, where the image name appears only once in the log, I see no delay and the image appears immediately I click the button.

Perhaps in HTML5 the image is being cached to disk, whereas in Flash it is being held in RAM.

What I will do later today is let the pano load and get to the point where I press the help button, but delete the original help image from disk before I actually press the button, and see what happens. If the browser is getting a cached version from disk all should still be well. If it's calling for the original again presumably I will see an error.