jQuery Preloader

More and more websites are embracing the jQuery Preloader. A lot of websites are using CSS Full Screen Backgrounds, or high resolution retina display images, which can cause websites to load slower. I can’t help but think this is taking us back to the days of slow loading Flash websites. That being said, I’m still on the fence about them.

Although, if the project calls for these larger file sizes and having a jQuery Preloader will enhance the overall user-experience, then why not? Recently, I launched the Havas Luxe Events Website, which utilized the jQuery Preloader, “jPreloader”, for images and CSS backgrounds. It’s really great plugin that makes it very easy to create a jQuery Preloader.

How to Create a jQuery Preloader

First you will need to download the plugin from this website

Then, you need to include the javascript file. I usually will add the javascript to an existing file, so we are not loading tons of different files. For simplicity, we will just load the file directly.

Now you will need to enter this javascript right before the body tag. For a WordPress website, this should go in the footer.

$(document).ready(function() { $('body').jpreLoader(); });

Styling the CSS is “optional”, but I’m sure you would like to customize the look for your project. Here are some styles to get you started. Of course, you can use the style sheet provided with the files that you downloaded, and tweak them accordingly.

With this CSS we created a background image sprite. The logo is side by side in the sprite, where one is colorized and the other is grey scale. This will give the appearance that the logo is “filling in” as it preloads. You’ll need to mess with the styles and positioning for your website, but this should help you get started.

body{ display:none; } #jpreOverlay, #qLoverlay { background-color:#000; width:100%; height:100%; position:fixed; top:0; left:0; z-index:11; }

`

#jpreSlide {
font-size:22px;
font-weight:700;
color:#FFF;
text-align:center;
width:100%;
}

#jpreLoader, #qLloader {
width:448px;
height:69px;
background:url('../images/loader_logo.jpg') 0 100% no-repeat;
position:fixed;
top:43%;
left:50%;
margin-left:0px;
margin-top: -300px;
}

#jpreBar, #qLbar {
width:448px;
height:0;
position:absolute;
bottom:0;
background:url('../images/loader_logo.jpg') 100px 100% no-repeat;
}

`

#jprePercentage, #qLpercentage { color:#888; text-align:center; position:absolute; height:30px; width:100px; margin-top: 40px; }

Let me know if you have any questions in the comments below. Thanks for reading!