Published April 15, 2013 by Brad Knutson
Often times as web developers, we build websites that are fairly media intensive. Lots of graphics, slideshows, large Javascript files, large CSS files, etc, etc. It’s not uncommon for page load times to suffer on some really visually appealing and well designed pages.
There has to be a better way to display these pages, rather than watch the awesome background image that we created load literally line by line.
This topic got me thinking. Certainly, the first area we should look at is optimizing our images, minifying our stylesheets and scripts, and doing anything we can to reduce the weight and bandwidth strain the end user feels. In some cases however, design and functionality outweight a slight delay in page load time. Clients like seeing really stunning and visually appealing pages, jQuery functions “wow” them – and that’s great – but page load times can suffer.
In cases where we do not want to sacrifice style and design for page load time, perhaps we should consider another alternative? What about displaying a page loading image while the page loads gracefully in the background, out of site? How can we accomplish this?
Find a page loading graphic
If your a talented designer and want to make one yourself, by all means go right ahead. For the rest of us, a quick Google search for “page loading gif” will produce some good results. Make sure you find an image (perhaps from a stock image site) that doesn’t have any usage restrictions. Remember to protect yourself. Here is one I found.
Add the Page Loader Div
Add the below div right below the opening <body> tag.
<div class="loader"></div>
Add some CSS
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
This ensures that the page loading image is centered on a near white background (change color as desired) and covers the entire screen. The z-index positions the full-screen div on top of all the other elements, hiding them behind it while they load.
Add jQuery and a line of code
The final step is to add a link to the jQuery library in the header, as well as a simple jQuery function call. Add this above the closing </head> tag.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
Without this jQuery function, the page loading div would cover the entire page indefinitely. The jQuery function waits until the DOM has completely loaded, then fades the page loader div out of view, showing the contents behind it.
As soon as your browser caches the contents of the DOM, page load times will increase dramatically. I’ve purposely added some fairly large size images to the demo I’ve linked to above, but you’ll likely only see the full effect the first time you load the page. To see it again in all it’s glory, try clearing your browser’s cache or trying it in another browser.
I don’t believe this method should be used on all sites, but we’ve all seen media intensive sites that utilize this method. It is a nice placeholder as opposed to watching images and CSS load slowly on our screen.
Leave a comment below if you have any questions!
source : http://bradsknutson.com/blog/display-loading-image-while-page-loads/
