Show Loading Image while the website loads

show-loading-image-while-website-load-featured
20 Flares 20 Flares ×

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.

20 Flares Twitter 6 Facebook 9 Google+ 4 LinkedIn 0 Pin It Share 1 20 Flares ×
author avatar

Akash is a freelance web designer and developer and also the founder of Dzyngiri.com You can get connected with him on Twitter and Facebook

Connect with us

27 Comments

  1. Hello Akash,
    I want to load Spinner before my web page is loading in a browser. As soon as page is going to load spinner should disappear. Tell me how can I do this. Should I use $(document).ready(); or $(document).load();
    Please help me fast.

    Thank you,
    Vishwajit

  2. Hi there, thanks for a very simple landing page solution! Is it possible to only load this landing page on the initial load. So when I’m navigating the site and go back to index/home the landing doesn’t run again.

    Thanks!
    Doug

  3. and btw if you are using anything that already uses jquery and has it’s own jquery plugin like in my case pretty photo it will get messed up if you add the jquery plugin just skip it and everything will work fine

  4. Thanks for this code. works great.

    BUT, I use this when the user clicks on a link in my page and there is an action performed in the JavaScript on that page and then forwards it to another page. So, I show this when the user clicks on the link and since it gets forwarded to another page, the image disappears automatically when the second page loads. Now my PROBLEM is, from the second page if someone clicks on the “back” button of the browser, it comes back to the previous page with the gif image visible and never disappears !!!

    Can you please help on how to fix this..

  5. i used

    $(window).bind(‘load’, function(){
    var preload = [
    '/assets/images/alert_ticked.jpg',
    '/assets/images/alert_unticked.jpg'
    ];
    $(document.createElement(‘img’)).bind(‘load’, function(){
    if(preload[0]) this.src = preload.shift();
    }).trigger(‘load’);

    });

  6. The spinner does not close even after the page has loaded, what am i doing wrong? its a single page website so i have to use some loading gif but it does not seem to close.

  7. wow this page could use a spinner, loads very slow (firefox) and in the middle of the page I see a bar with some social network icons or something?! in the middle of the screen?!

Leave a Reply

(*) Required, Your email will not be published