EclecticGuy

Yesterday, I blogged about how to assemble an interactive demo from a set of balsamiq Mockups image files (or any set of image files for that matter).  Well, when I awoke this morning I realized that I should pre-load the image files on the first page (usually index.html) to make the demo more responsive. Turns out that it is really easy to do using only CSS! I’ve updated the index.html.txt and selection.css files already so you can download fresh copies to see how it is done.

The Details

 selection.css now includes a new class to set the display of items of that class to “none“:

.hidden_image {
    display:none;
}

Now, in your first HTML file (usually index.html), you simply need to list the images you want to pre-load and set their class to hidden_image. It is important that you do this at the very bottom of the HTML file so the browser can start to lay out the rest of your demo while it is loading the images. I added them immediately before the </body> tag:

<img src="images/01.png" class="hidden_image">
<img src="images/02.png" class="hidden_image">
<img src="images/03.png" class="hidden_image">
<img src="images/04.png" class="hidden_image">
<img src="images/05.png" class="hidden_image">
</body>

Now, when you open your index.html, the browser will preload all of the images you specified and the demo will be much more interactive! If you have a lot of images or very large images to pre-load, you might consider not loading them all up front. Instead, load only the images needed for the hotspot targets. Then on the target HTML, use the same technique to pre-load it’s hotspot target images – cascading the pre-loading.

And 1 last thing: you can run these demos both from the desktop or from a Web server!