Instead of showing a blank white page is it not a great idea that of showing a loading image while your website is loading? Ofcourse it is a great idea because it will improve the user experience of your website. If your website is containing some heavy content like images and some jQuery plugin and all then it may take some long time to load. It may also happen that the user is accessing your website on slower connection. Then in this situation it will be good idea to show a loading image or show some message to the user.
So let’s start with the simple jQuery function which will show the loading image while the website loads
<!-- jQuery Plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<!-- Preloader --><script type="text/javascript">// <![CDATA[
$(window).load(function() { $("#spinner").fadeOut("slow"); })
// ]]></script>
Let’s add some CSS to give it a beautiful look and show the image in the middle of the screen
#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(your/image/path/loading.png) 50% 50% no-repeat #ede9df;
}
And in the last, add this html right below the opening body tag <body>
<!-- Preloader --> <div id="spinner"></div>
In this way we can show the loading image while your webpage is loading. I hope that this simple snippet will work for you flawlessly. If you find some difficulty to add this snippet to your website then do comment below in the comment section to ask your query.
To be updated with our latest articles, freebies, snippets, tips and tutorials you can be connected with us via Twitter, Facebook and RSS Newsletter.
Great example!