How To Display A Loading Html Page While Site Content Loads?

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 hav

Solution 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();
  });
});

Solution 2:

You need add js

<scripttype="text/javascript">
    $(window).on('load', function () {
        var $preloader = $('#page-preloader'),
        $spinner   = $preloader.find('.spinner');    

        $spinner.fadeOut();
        $preloader.delay(350).fadeOut('slow');
    });
</script>

HTML:

<divid="page-preloader"><spanclass="spinner"></span></div>

CSS:

tbodytrtd{
    max-width: 300px;
}
h1 {
    text-transform: uppercase;
    text-align: center;
}
.container>a:hover {
    text-decoration: none;
}
#page-preloader {
   position: fixed;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   background: #fff;
   z-index: 100500;
}
#page-preloader.spinner {
   width: 100%;
   height: 100%;
   position: absolute;
   background: url('YOUR-IMAGE-NAME.gif') no-repeat 50%50%;
   margin: -16px00 -16px;
}

Do not forget to add a JQuery to the project!