Preload a site with jQuery

Update

We removed the preloader functionality on our site, because external sources such as flickr and twitter sometimes made the preload go for 5-8 seconds. But if your site isn’t pulling data form external servers, go ahead!

____

Preloading entire pages has always been something belonging to Flash sites, but recently I found a solution with the excellent jQuery! Take a look here, and achieve a preloader functionality as on mumsstudio.com.

Demo

Example

Background

We want to have a div which is covering the whole site, and disappears when all content is loaded. The preloader requires the jQuery library – you can see the code in the source which can be downloaded at the end of this post.

HTML

The markup is very straightforward. Right after your place something like;

<div id="preloader"></div>

A simple div…

CSS

The CSS is more up to you. You can change color and the preloader graphic (a simple animated gif). In this example I go with this code;

div#preloader {
 position: fixed;
 z-index: 999;
 width: 100%;
 height: 100%;
 background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
 }

Javascript

$(window).load(function(){
 $('#preloader').fadeOut('slow',function(){$(this).remove();});
 });

Simply, when window (all content) is loaded, fade out the div with id preloader and remove it.

Easy and smooth!

Links & downloads

jQuery preloader source (7.4 KiB, 365 hits)
Easy ajax preloaders
Example