Loading logic - best practices?

[Burndog (Steve)]

What is the best practices when loading a Hype presentation that has some weight to it’s contents?

For instance, does Hype know if only Scene one is loaded and won’t load Scene two until a call has been made?

Is the best logic to have Scene One as a small page (low physical kbs of Elements on the page) and then have larger weight Scenes subsequently?

I guess the answer revolves around how elements are loaded in a Hype Presentation… Ideally it would be nice to have elements load as needed. For instance ; Scene One loads first and on completion subsequent Scenes are preloaded in the background. This could be achieved with some function on the timeline of Scene One (loadAllOtherScenes() ) or if known which is the next needed scene a function like preloadScene(‘nextScenesName’)…

Just wondering if creating low weight first pages would lessen the load time for people with slow connections and if this is used in place of low weight loading animations?

[jonathan (Jonathan Deutsch)]

There’s no best answer as it is always dependent on your purpose, audience, and amount of work that you want to put in, but here are some points that might help make some decisions:

• All the animation data (scenes, elements, timelines, keyframes, symbols, etc.) and the Hype runtime is loaded before anything else happens. If you have a lot of scenes with animations, this will add initial load weight but then there’s no penalty after that.
• Images and audio marked as Preload in the Resource Library will be loaded before any scenes are shown.
• If an image is not marked as Preload, then it will (more-or-less) be loaded when the scene with it is shown. Hype doesn’t set the URL for the image until this point.
• Hype doesn’t have any mechanisms (yet!) to choose independent resource loading beyond the Preload checkbox. However you can make your own preloader - basically if you make a dummy image element and set the .src to the image URL the browser will download it and subsequent uses will (generally) be fetched from this cache.

[Burndog (Steve)]

• All the animation data (scenes, elements, timelines, keyframes, symbols, etc.) and the Hype runtime is loaded before anything else happens. If you have a lot of scenes with animations, this will add initial load weight but then there’s no penalty after that.
• Images and audio marked as Preload in the Resource Library will be loaded before any scenes are shown.

Thanks for the reply but this confuses me.
If “All the animation data and Hype Runtime is loaded before anything happens” how does preloading come into play as it seems waiting for all content negates any opportunity for “Preload”.

I’ve done some further research and believe the idea behind preloading is to preload assets into browser cache in advance of accessing an entirely different Hype document/presentation.

But even that does not seem to present an advantage unless you are separately requesting the files to preload based on a timeline or javascript event. In other words, post/after primary animation loading.

[jonathan (Jonathan Deutsch)]

If “All the animation data and Hype Runtime is loaded before anything happens” how does preloading come into play as it seems waiting for all content negates any opportunity for “Preload”.

Image assets are usually the heaviest items in an animation. When I refer to “animation data and Hype Runtime” I am just referring to the *_hype_generated_script.js and the HYPE-NNN.thin.min.js files. Resources other than this get loaded/preloaded by the Hype runtime.

Preloading ensures that images will be shown when needed. If preloading didn’t exist, you might be showing an animation of an image that hasn’t been downloaded yet – in other words, not showing it!

Preloading just isn’t fine-grained at the moment… it is for the entire document or nothing.

Hype does have a basic “loading” screen that option in the Document Inspector and there are ways to make your own. I’ve seen some users just split their scenes into separate .html documents and rely upon showing this in between scenes.

[Burndog (Steve)]

I understand now…Thanks for clarifying.

[jonathan (Jonathan Deutsch)]

FYI, i just wrote some code to do custom preloading tied to a timeline here:

I wish I Scene page loading page is designed

Can you elaborate on what you are trying to do? If you are trying to combine this with manually preloading images, you would use code like this for On Scene Load: //////////////////////////////////////////////////////////////////// // modify this list for the images that you want to preload // be sure to uncheck the "Preload" and "Automatically optimize when exporting" checkboxes // in the Resource Library var imagesToPreload = [ "${resourcesFolderName}/imageName1.png", "${…