Order of document load

1

I have many hype documents on one page, and it seems like they are all loading at the same time. Is there any way to fix this problem? The landing takes a little too long to load.

2

Consider using remote files loaded in your web host.

I have one web site that has 6 photo galleries, each uploaded to my my web host server, accessed with the individual URL for each gallery, and it surprised me how quickly they load. However, each gallery loads with a tap, so it is really the person viewing the web page who decides when it loads, but even then the load time is impressive. The galleries were made in Sparkle because they have a convenient gallery tool, and loaded into Hype, which is generally the reverse of how most people do it.

I can’t show the page yet because the client has not approved the complete build of all the pages.

I know that won’t help you on your landing page, but in the resources folder, click on the document and at the bottom you can uncheck Preload. Of course, you do have to look at your design in terms of when the viewer of your site will see the individual items in your site. Can this item wait? etc. ?

3

How does preload usually effect the actual load? If each document is rougly 300-400kb, would having preload be a good option?

4

If all the documents within your Hype document are all set on preload, then they will ALL need to load before your animation starts. So several, depending on how many could be a big chunk of time.

By unchecking preload on a given document, you are saying its ok for a particular 300-400k item to load later. It all depends on how your “story” is written and showed.

5

I try not to have more than a total of 1 MB for all contents of a landing page. It doesnt always happen because I tend to use a lot of full page background images. Depending on the initial file size and amount of detail of the photographic image, if you have one, you can minimize the using Pixelmator, Affinity Photo, Photoshop, or Apples Preview app (Tools/Size) I have had a couple near 1MB alone, because of high photographic detail. The image loads in about 3-4 second which is on the high end of acceptability.

6

You can watch what-loads-when by watching the Network tab in Chrome's developer tools. You can even throttle the speed to slow down time. If you want to prioritize one over the other, this would require listening to a HypeSceneLoad event. Something like this on the page:

<script>

  function documentHasloaded(hypeDocument, element, event) {
    // Dynamically load another Hype documents once the first document has loaded. 
    // Example code: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml 
  }

  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":documentHasloaded});

 </script>

So this would require that you only fill in the JS reference to the first Hype document, and have this above script fill in the rest.

This is not a super easy method: My thinking on this is you should preload any image content that is animated at the very beginning of the Hype animation runtime, but turn off preload for anything else. If you have large images that are slowing things down, convert them to progressive JPEGs so they display a bit sooner.

2 Likes
7

That's what I have been doing, of course its almost impossible to document the effects in any consistent way, but it makes sense.

8

I would be happy with the landing loading first and then everything else beginning afterwards. Would you say turning off pre-load for the ‘everything else’ is sufficient, or should I be doing this JS method?

9

Yes I think this is sufficient for decreasing the initial load time. This will likely be an easier process in an upcoming release!

1 Like
10

By the way I forgot to mention that these are all different hype documents. E.g. The landing is a hype document of its own, and there are around 10 other different Div elements calling a unique hype_generated_script. They do however all link to the external hype_full/min JS file.

Would this make any difference to preload then, since they are all independent of each other.

Another thing I’ve noticed is that my footer seems to be the first document that loads, putting the nav bar and landing in queue/stall. What’s going on there?

11

Hype's loading mechanism is smart enough that if all Hype documents were exported using the same version of Hype, it will only download the HYPE-NNN.ssss.min.js file once. It of course still needs to download and run the various _hype_generated_script.js files, so the more you have of those the more connections will be needed.

The only real way is to look at the network tab in the developer tools and see what is loading when. I would guess those may be coming in first if they have fewer/smaller images.