Preloading a help image

  • 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

  • Sorry but all images are loaded. If they are visible or not does not make a difference.

    I really had to test this because if it was true that visible false meant that they are not loaded until clicked it would solve the problem I have with
    to much memory usage on iPad.
    I have done a test and checked the activity log in Safari and they will be loaded also as visible= "false"

    Text images for the Retina gives a 4 times larger memory usage as they have to be double size to be sharp.

    The limit is around 12 of this png popups in a size of 880x880.
    If I put more even my new iPad air crashes.

  • 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.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!