Seriously easy jQuery preloader

May 31st, 2011

One of my latest projects is a site with a ton of images and the images have to all load before some JavaScript can run and the site becomes usable. Coming from Flash, my first thought was to use a preloader but I’ve never built a preloader for an HTML/CSS/JS site and I had no clue what to do. Turns out it’s really easy.

We aren’t actually going to build a preloader in the way that a Flash preloader works. Essentially, what we’re going to do is hide everything until the site is loaded. You do this by creating a div that covers the entire window, so you can’t see the site loading behind it and then when the site is completely loaded, you remove the div. We aren’t technically preloading anything, but we’re faking it and mimicking what people are used to with Flash preloaders.

For the HTML, we’ll just need a simple div at the top of our code:

1
2
3
4
5
6
7
8
9
<div id="preloader">
  <div id="spinner_container">
    <img src="images/logo.jpg" alt="" />
    <img id="spinner" src="images/rot.gif" alt="" />
  </div>
</div>
<div id="wrapper">
  <!-- site code -->
</div>

I’ve just created a div with the id preloader which will cover the entire window, the spinner container div will just contain a logo image and a spinner gif that I’ll position in the center of the window. This way a visitor knows that something is going on and won’t just leave thinking the site doesn’t work.

Some CSS to make everything look right:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
body {
  overflow:hidden;
}
#preloader {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:white;
  z-index:2;
}
#spinner_container {
  width:193px;
  margin:250px auto;
}
#spinner {
  display:block;
  margin:20px auto;
}

The important things there are that the body is set to overflow to start, so that visitor can’t scroll down a white page of nothing. And the preloader div is position absolutely to the top left and it’s width and height are set to 100% so the div covers the entire window. The z-index is set to 2 in this example so that it’s on top of all the other content. If you’re using z-indexes in your CSS, you’ll have to make sure the preloader div is set to the highest position.

Next, the jQuery that makes the thing work. All five lines of it.

1
2
3
4
5
6
$(window).load(function() {
  $('#preloader').fadeOut(300, function() {
    $('body').css('overflow','visible');
    $(this).remove();
  });
});

Pretty simple stuff going on here. When the window finishes loading, fade out the preloader div, then set the body’s overflow back to normal. Finally, it will remove the preloader div because we don’t need it anymore.

Like I said before, we aren’t technically preloading anything, but if you have a site that takes a while to load and looks funky while it’s loading, this is a good way to go. Most people have experienced preloaders in formats like Flash, so they’ll understand what’s going on when they visit the site. And if they come back, elements of the site will be cached and the site will load faster. I’m pretty sure there’s more complicated ways of doing this but this will get the job done and it’s crazy easy to set up.

14 Responses to Seriously easy jQuery preloader

  1. Amitabh Rout says:

    Hi,
    Can you please give some demo files.
    Thanks

  2. Ray says:

    Quick question. Will this work on a div containing a SWF?

  3. Mike says:

    I don’t think so. A swf isn’t really a part of the document, so the preloader div will be removed when everything else loads, regardless as to whether or not the swf has finished loading. The best thing to do would be to put a preloader on the swf.

  4. SEO Columbus says:

    I am looking for what Ray was referring to above. Would the solution for the using a jquery loader w/ flash be just to run the animation for x amount of seconds and have it disappear?

  5. Mike says:

    You could do that, but it’s hard to know how long it will take the Flash file to load. I really think you’re best off using a preloader in your swf than using a jQuery one.

  6. chathuranga says:

    its not working for me. it loads the preloader. but does not exit from it !

  7. Mike says:

    chathuranga

    Make sure that you’re selecting the right div. jQuery can’t remove the preloader if it can’t find it.

  8. Rick says:

    If javascript is disabled then the image will show but never be hidden, in this case.

    How about (inside the first div) adding some inline javascript that writes the image tag you are putting in there (using document.write since the DOM may not be ready yet at that point in the page load)?

    That way the loading image will only show up when JS is enabled, and then of course you will be able to hide it as you’ve done here.

  9. Joel says:

    This works great for me. The problem I have is it runs everytime the user returns to the home page, even if everything has been cashed. How would you make it only run when the user first came to your site ? Could you have it check to see if a particular file (say for example, your homepage BG image) has been cached, if so don’t run ?

    also there is the problem of the user that doesn’t have JS enabled. Could you put a function that displays the preloader div in the tag with the rest of it ?

    Thanks

    Joel

  10. Juan says:

    No example?

  11. It works for me. bad that doesn’t work with swf in div container. But the other elements load good. Could be better with a percent number side if de spinner.

  12. Ilija says:

    Well,it would be much better to have loading bar with percent but this is good..Thanks

  13. CerVanteZ says:

    Hey guys,

    Thanks for this nice little peace of jQuery snippet.

    Did anybody notice, that the entire body will hop to the left, when the scrollbal is faded in?

    I like the preloader, but the hopping is uncomfortable to watch.

    Did anybody recognize this circumstance and even better has solved it?

    Thank you again for this snippet.

    greetz

  14. mike says:

    Does anyone know what the function is to tell when
    an individual video has finished loading as opposed to the whole window. For example when a user clicks on a button to see a video load up in a display area. I want to be able to check the percentage of the video load so that I would know when to fade the “preloader”

    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *