5 Nov 2013 2:10 AM #1
Quick Load first scene without waiting
I specifically made a first scene with a low KB image ( 25KB ) for a quick appearance. Nevertheless, it is still not showing quicker than before. The following scenes contain 2 gif animations with a total of 3 MB. It seems it is still loading all content, before the first scene shows up.
How can I make the first scene appear, before it loads all the rest?
(I suppose this has been asked before, but I can not find anything specific enough).
7 Nov 2013 5:22 AM #2
You can force preloading of the images with the following JS code:
//1st img var img = new Image(); img.src = "/path/to/your/image"; //2nd img var img2 = new Image(); img2.src = "/path/to/your/2nd/image"; //etc
8 Nov 2013 9:50 AM #3
I tried this, but it does not make any difference. It still loads everything for all scenes before the first scene starts playing. The result is a long delay of a blank nothingness until anything shows up.
What I am trying to achieve is: Loading the one image for the first scene. Start playing the first scene and then while the first scene plays, load the images for the other scenes.
I also tried placing a background image in the page or iframe. This would suffice as a placeholder until the animation is loaded and can start playing. Unfortunately a big white box covers about 1/3 of that image. Thats why I created a small quick loading first scene, which does not help anything if it also only shows up after all scene images are loaded.
Di you have any other idea?
10 Nov 2013 12:44 PM #4
Hi thomahawk - I've sent you a private message.
13 Nov 2013 2:29 AM #5
As an input to others, here is Miro's solution:
Because all the scenes are on the same page, all the images are loaded immediately by the browser. The browser also loads all the html structure before executing any JS or animating the page - therefore you were getting a white screen until all the images were loaded.
What needed to be done is to initialize loading of the two larg gif files after the initial page was loaded. For this, I set the default path for the background images in scenes 3 and 4 to mountain-1.gif (because this is loaded for scene 2 anyway and is relatively small size) and then added the following lines that are executed on start of scene 1:
This means that mountain.gif and mountain-open.gif will not be loaded initially by the browser, instead, we substitute what the image files point to after the scene 1 has started.