How to preload a webpage

Question

I have a multimedia presentation using html, background is black, fullscrenned

When I navigate around it jumps to different webpages, but in between it flashes white and loads.

Can I preload these webpages after the one currently being viewed is loaded, so there would be less loading time for the next webpage, giving an illusion of an actual program running a presentation.

Answer 1

First of all, this 'flash' is normal, and how the web works. So, I wouldn't dwell on it too much.

You can 'preload' a page in different ways. One way would be to put a small 1px square iframe on page 1 that loads page 2. Then when you go to page 2, that page is already in the cache. But note that you still might see that flash, as the browser still has to redraw the page.

Another solution would be to use AJAX. Instead of loading an entire page, just load the content of the page itself via an AJAX call. That way the background never changes and you never see the flash.

But likely the easiest solution is to just make your presentation one page to begin with. There are several CSS frameworks out there that let you create a multi "Page" presentation with one HTML document. Here's one: http://bartaz.github.io/impress.js/#/bored There are many more. Just google "CSS presentation framework"

Answer 2

There is multiple ways to accomplish this.

Jquery Lightweight Jquery preloader

Javascript Javascript Preloader

It will ultimately be something along these lines...

Jquery

<script type="text/javascript">// <![CDATA[
$(window).load(function() { $("#spinner").fadeOut("slow"); })
// ]]></script>

Styling CSS

#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(your/image/path/loading.png) 50% 50% no-repeat #ede9df;
}

Also, as DA mentioned, You dont need to load separate pages for navigation if you dont want. This requires a little more work but, You can just keep the same page and replace content in that page as needed.