Using preloaders to reduce delays

Preloading content is not a new concept in the world of web design. The idea is to reduce the amount of time it takes to view the page in a browser, as some (or all) of the content has been fetched ahead of viewing the page and cached in the browser.

There are plenty of examples available using JavaScript (such as PreloadJS at http://www.createjs.com/#!/PreloadJS). But this adds an extra overhead to our pages that we can avoid, particularly in a responsive design.

Instead, we can use CSS to achieve the same effect, provided the styles and images are called at the right time. This way, they will be ready for us when we render the images on screen.

Note

For the purposes of this demo, I've simplified the code to concentrate on the preloading process only.

Let's take a look at preloading in action with a simple demo:

1. From the code download that accompanies this book, extract a copy of preloading.html and then save it in our project folder.
2. Next, extract...