Preloading a Series of Hype Documents

Using JavaScript with Hype
1

I need to pre-load a series of hype documents which will shown sequentially as the inner html of one specific div element (mainDiv). I need them to be available immediately at each step without any loading delay. I’m wondering if this would be the best way to do this:

Load each hype documents into an iframe of its own hidden div on the page: divElem.style.display = ‘none’

Then when it’s time to load a specific hype document, set the innerHTML of mainDIv to an iFrame containing that hypeDocument.

And just repeat that for each step, and clearing out the pre-load div after it is loaded.

Is this the best approach or is there a better way. I assume all of the assets and javascript will be cached in the browser during the preload and so they should load immediately (providing that all of the assets have been downloaded).

Any flaws in this reasoning or a better approaches.

Thank you.

2

Your general approach sounds good, but I’d make a few small changes:

  • Don’t use iframes, instead just use the hype container divs. This will reduce load time and memory consumption because they can all use the exact same runtime code.
  • You could set display:none on all the container divs and when you want to display one reset all to none except for the one you set to visible.
3

@jonathan I didn’t realize that about iFrames (they are on the same domain and the page, though). But if I use the hype container divs instead, what if there are specific external resources such as an external javascript or css files that are loaded for a specific document. That’s the case for me. In that case, the index file for that document (the head section) is where that goes. That’s why I’ve used iFrame. Is there a way to accomplish that using the Hype container divs? How would I load the specific resources for each document. Thanks.

4

It is true that you can get some download caching advantages still with iframes as you had originally proposed, but by only having a single runtime there will be less memory usage (not to mention there just is a bit more involved in iframes anyhow!).

The div solution is a little more complex in putting it together. If each document has different Head HTML requirements, ultimately what you would do is copy the head HTML section to head of the combined .html document, and remove any redundancies.

A basic hype .html export page looks like this:

<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
	<title>Untitled 4</title>
	<style>
		html {
			height:100%;
		}
		body {
			background-color:#FFFFFF;
			margin:0;
			height:100%;
		}
	</style>
	<!-- copy these lines to your document head: -->

	<meta name="viewport" content="user-scalable=yes, width=600" />

	<!-- end copy -->
  </head>
  <body>
	<!-- copy these lines to your document: -->

	<div id="index_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="index.hyperesources/index_hype_generated_script.js?17501"></script>
	</div>

	<!-- end copy -->
  </body>
</html>

You can see via the comments there is the separate head section that you can copy over (this doc only has the one standard viewport line!) and then the div section below is the actual .hype content.

If you are going to be making a lot of tweaks it will make updating harder. In this case you may want to stick with your original approach of using iframes as they would still work.