How to display a loading html page while site content loads?

Question

I am working on a site which contains a whole bunch of MP3s and images, which obviously got some loading time. I'd like to display a loading page while all the content loads.

I have no idea how to achieve this, but I do have the animated gif I want to use.

Any suggestions?

Answer 1

So basically you make a preloader with 100% width and height of the viewport, set a background color and your GIF on it. What the following JS does, is wait until everything has loaded and then the preloader fades out.

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