Loading scenes as they are selected

I’m in the process of creating a image heavy website using Hype, these pictures need to be relatively high quality.
The website in question is finished, but the loading time is unacceptable (over 5 seconds). I’ve brought the size and resolution down as much as possible without degrading the pictures to badly, but it’s not enough.

I’ve been trying to find some script that will allow scenes to load individually when they are selected in the menu, as opposed to loading the whole Hype file at once, and to have only the 1st scene to load instantly.

if anyone has a solution for this I would be eternally grateful!

The quick answer is to uncheck preload for all images except those on your first scene. You can filter by images in the resource library, click the first one, then click the last one, and uncheck preload for all but your first scene content.

One way to reduce the top to bottom standard load for large images is to set them as progressive JPEGs (or PNGs). Here's an exaggerated example of how they load:

This page has more info: Progressive Image Rendering

Is it the fact that images aren't immediately visible when visiting a new scene the part that bothers you? One workaround is to place images (which are not set to 'preload') off scene in your first scene. The behind the scenes download will look like this:

  1. If you have your first scene's content all set to preload, your Hype JS + Preloaded images will download first.
  2. Your first scene will appear fully formed.
  3. Any images not preloaded which are off scene on the scene the visitor is seeing will at this point begin silently downloading in the background.
  4. If you visit a scene containing any of those preloaded images, they'll appear instantly if they have downloaded, or at least they'll have a head start :slight_smile:

Hi Alex!

I had a very involved Hype project that had over 2000 assets (video, graphics, images, sound tracks) divided over 5 scenes. Each Scene had three videos and 8-16 “micro-scenes” for which I used symbols (i.e. the “Related Exhibits” in the bottom bar). The viewer could click on anything at any time - there was no linear progression.

My solution was to use an iFrame based set up. There was a “Main” HTML document that had a menubar that loaded the iFrame content. Perhaps there may be something useful for You here. Please see Fig.1 below.

Note: The “Main” HTML page was done in Dreamweaver - all the other HTML pages are Hype generated.


The code for the “Main” HTML page:

<div id="documentaryHolder">
<img id="indicator" src="BHgraphics/indicator.png" width="9" height="9" alt=""/>
<div id="bh_MenuHolder">
  <ul id="mainMenu">
  <li id="prologue" class="liStyle"><a href="BH_01_Prologue/BH_01_Prologue.html" target="iframe_a">Prologue</a></li>
  <li id="evidence" class="liStyle"><a href="BH_02_Evidence/BH_02_Evidence.html" target="iframe_a">Evidence</a></li>
  <li id="anatomy" class="liStyle"><a href="BH_03_Anatomy/BH_03_Anatomy.html" target="iframe_a">Anatomy</a></li>
  <li id="lineages" class="liStyle"><a href="BH_04_Lineages/BH_04_Lineages.html" target="iframe_a">Lineages</a></li>
  <li id="culture" class="liStyleEnd"><a href="BH_05_Culture/BH_05_Culture.html" target="iframe_a">Culture</a></li>
  <iframe src="BH_01_Prologue/BH_01_Prologue.html" name="iframe_a" width="610" height="520" style="border:none;" scrolling="no"></iframe>
1 Like

Hi Daniel,

Can’t believe I’ve never even looked at the preload images tick box, just goes to show there’s always more to learn!
After some searching I figured out how to export images for web use with photoshop, by doing that and making sure images don’t preload I’ve managed to sufficiently reduce load time.

Helpful as always, thanks for your time!


Hi Jim,

As mentioned in my reply to Daniel I seem to have sorted out the load time for my website, however this does look like an interesting solution for having larger quantities of higher quality images, so I’ll definitely be looking into this method soon.

Thanks for the input!