Display Loading Image While Page Loads

  • follow us in feedly
Published April 15, 2013 by Brad Knutson
Display Loading Image While Page Loads

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?

View Demo

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.

Page Loading Gif

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.

View Demo

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!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

85 thoughts on “Display Loading Image While Page Loads

  1. KAILASH

    Respected Sir,

    I am using HTML Frames in my website. I have four contents. Header,Menu,Content & Footer. When user clicks on any Menu link the content will be displayed at content section. I have implemented your code on my pages. However after clicking on any Menu , ajax loader not works !! I have included everything as you suggested. Still it is not working. So i have one query. Will you code not work in HTML frame? I think it should. Please assist on this.

    Hoping for your favorable response.

    Regards
    Kaialsh

    Reply
    1. Brad Knutson Post author

      If I understand you correctly, you have a navigation menu that opens up different pages in iframes. You want the loading graphic to show up in the frame every time someone clicks a new navigation menu item, correct?

      You could still accomplish this by adding the HTML, CSS, and jQuery necessary on every single page (the pages that will be displayed in the frame).

      Hope this helps!

  2. KAILASH

    Dear Brand Sir,

    Yeah somewhat like that! Ok Let me try what you suggested.Thanks for your assistance.

    Regards
    Kailash.

    Reply
  3. Bill C

    This appears to be geared for waiting during image loading. What about if I am writing a long report to the screen, and I simply want to display a “In process” image while it’s loading the report. Currently, the screen is blank until the report is done writing. Just wondering if there’s any tweak to this method to work with just heavy HTML writing. Thanks.

    Reply
    1. Brad Knutson Post author

      Hey Bill,

      You are correct that this example only displays the loading image while HTML and media elements are loaded. The script is set to hide the loading image when $(document).ready() is true.

      If you are doing some heavy server-side scripting, this method wont work. The loading gif is only displayed after the request to the server has been answered and before the DOM is fully loaded. If you want to display a loading icon while a server-side script is running you’ll need to utilize AJAX.

      Hope this helps!

    1. Brad Knutson Post author

      Hello Martin,

      You are correct, this will increase your page load time ever so slightly, because you’re loading a .gif file that wasn’t there before. If you are concerned with page load times, then this is not a good solution.

  4. Gurung

    Hey Brad, Any idea how this can be achieved only for the content inside a div. Let me elaborate, right now the loading gif hides the content of the entire page until it loads completely. I need this to hide just a content of the div while it is loading.
    Another question, I run a wordpress site, so can it be made to work with the jquery that loaded by default in wp. If that is possible than it would be a great step in optimization. Other than that it is an incredible tip.
    Cheers. Gurung.

    Reply
    1. Brad Knutson Post author

      Hello Gurung,

      If you want to create a similar effect on a specific element, as opposed to the whole DOM, then I suggest you look into the imagesLoaded jQuery plugin.

      Now, WordPress has some conflicts with jQuery and the $ character, so you’ll want to replace all instances of “$” with the word “jQuery”.

      becomes

      Does this make sense? Hope it helps!

  5. ash

    Works great.. thanks

    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..

    Reply
  6. Matt Gray

    Hey Brad,

    Let me first say your Display Loading Image While Page Loads blog article works great! It was exactly what I needed to polish my website.

    However, I have one problem… It works great on all browsers except internet explorer(go figure). I saw that your example loads fine in IE, however, mine will not. I’m pretty new to web based programming and could use some insight. I will add my code to the URL above so you can check it out.

    Thanks,
    Matt

    Reply
    1. Brad Knutson Post author

      Which URL are you having problems on? This method should work as far back as IE7.

    2. Matt Gray

      I am, in fact, using IE10.0.9.
      When you load my project into IE10, it will just keep spinning the animated gif and never load the page. All other web browsers have no problem initializing.

      Right now I am just using a local host(IIS) to run my site, however, I will upload it to my URL this week.

    3. Brad Knutson Post author

      Interesting… When you get your website up, let me know and I’ll gladly take a look!

  7. Anitha

    Hello Brad,

    Thanks for the article. I’m trying to do something similar. I am using Spring MVC portlet technology to develop my application where i have a need to open a pdf in a new tab in browser on click of a button. I’m able to do it successfully, but it is taking some time to display the pdf as i’m doing many manipulations to generate the pdf in my controller. My question is , I want to display a waiting image to the user until pdf is displayed. How would i accomplish that? Your reply would be a great help. Thanks

    Reply
    1. Brad Knutson Post author

      Is the PDF large in size? If so, I don’t think you’ll be able to have a loading image display while the PDF is loaded in the background. The reason for this is because the browser is actually downloading the PDF to a temporary directory, then rendering it in the browser. Most browsers will show their own PDF-based loading icon while the PDF loads as well.

      If you are referring to displaying a loading icon while the processing happens to create the PDF on the backend, you could show and hide the loading icon using AJAX.

    2. Abhishek

      There is an event on ajax when you make database connections. So in start of the ajax you can call that loader and again when user ajax finishes the connection and state is changed on success you can hide the load.

    3. Brad Knutson Post author

      That is true, however the AJAX call doesn’t make sure that all assets (such as images) are loaded on the front-end. In a situation where you need to run an AJAX call, perhaps a combination of the two is necessary?

  8. nCoded

    Hi, this would make an excellent wordpress plugin. It is exactly what I need for my site as it has extensive content and API loading etc. Thanks for sharing the CSS and Jquery code.

    Reply
  9. Abhishek

    I was looking for a perfect solution like this. I was exactly looking for this. Never thought this could be done so easily.

    Thanks a lot.

    Reply
  10. Luke

    I would like for this script to be used a limited number of times… I have a gallery, and the php keeps everything in place once the different pages are fully loaded. Is there a way of implementing .one ()
    or even better, is there a way to predict how long a page will take to load and fire the script only if it takes more than 2 sec…
    or…
    can something be implemented to where I can play around with the optimal number the script should be fired…

    Thanks in advance

    Reply
    1. Brad Knutson Post author

      It would be mighty difficult to predict how long a page would take to load and only fire the script if it will take longer than 2 seconds. You certainly couldn’t do that with jQuery alone, it would take a combination of jQuery, AJAX and PHP.

      I guess I don’t understand what you’re asking. The script fires once when the page loads. If you reload the page, the script will fire again. If you click on an internal link to another page, and the script is on that page, the function will fire again. What are you trying to accomplish by limiting the number of times the script will fire?

    2. Luke

      I don’t want the user bombarded with the loader any more than necessary…
      There are three different pages on my website… gallery.php, album.php, and image.php
      album.php, and image.php are used over and over again… but once the framework loads completely the internal links load quickly and the loader becomes a distraction…
      alternatively… I noticed that reducing the opacity makes it much less intrusive. therefore it it loaded the first time with opacity at 100% and subsequently with opacity of the loader at 40% that would be cool too.

      Thanks for the quick response.

    3. Brad Knutson Post author

      You could write a PHP function that only includes the script if you’re loading the gallery landing page, and any subsequent gallery pages won’t require the script – or the PHP function could change the opacity level depending on your GET variables. Just a thought, I’m sure there are more elegant solutions.

  11. Luke

    I’m a php beginner… grab completed functions, no clue how to write my own. (not for lack of trying)
    just noticed though, that while I am using the page loader, I can no longer access the slideshow option…

    is there a way I could use the page loader as a div loader instead?

    Reply
    1. Brad Knutson Post author

      If by “div loader” you mean show the loading icon while a specific div is loading in the DOM, this solution (as in this post) won’t work. It gets a lot more complicated when you start attempting to do things like that unfortunately.

      If your slideshow stopped working, you likely have a script conflict.

    1. Brad Knutson Post author

      That could mean that the assets on the page (images in particular) are large in file size and talking a little bit of time to render.

  12. Marco Tsitselis

    Brad, thank you, I love it!

    However I have an issue, maybe you can help me out.
    I use your code in my site (http://rockyourmeal.com) and it is working great, BUT if I use it some animations on my site stop to work, I don’t really know why!
    I figured out thet the line that broke my site is

    Can you please help me on that?

    Thank you in advance, MT

    Reply
  13. Esser

    Hi, thanks for this great post. How would I implement this on tabs – that while a new tab is loading, a loading image should come up.

    Reply
    1. Brad Knutson Post author

      Hey Esser,

      To get this to work, you would likely need to call in your tabs via AJAX – and if so, this method wouldn’t be your best bet. Look at jQuery’s documentation on AJAX, it’s pretty straight forward!

  14. Roy Carmelo

    Hi Brad,

    I tried to use your code in my grails exercise but i was only able to implement the fading out but not the spinning animation. Can you give me an idea how to get the spinning animation working? Thanks!

    Reply
    1. Brad Knutson Post author

      Hey Roy – the “spinning animation” is just a loading gif. Just upload whatever loading animated gif you want and this example should work just fine.

    2. Roy Carmelo

      thanks for the reply brad. the grails exercise im trying to make is on my first gsp i’ll select a file to be converted to pdf and then my code would convert the file to pdf then save it to the folder that i specified. on my second gsp it will just show a message that says “file has been converted”. i believe i was not able to show the loading.gif because its not the loading of the second gsp that is taking to long but the conversion of the file. would you happen to know Brad how can i show the loading.gif?

  15. Mitchell

    Is it possible to make the loader not show if javascript is disabled? Because I imagine if someone did have it disabled they would be stuck on an endless loading screen.

    Reply
    1. Brad Knutson Post author

      You could hide it in CSS, then use Javascript to show the loader div. This way, if Javascript is disabled, the CSS for the loader div will hide it and the end user will not see it.

  16. Ryan A

    Thanks for putting this up on the web Brad. I have used it within my JQM + Phonegap app as I have one HTML page with lots of multimedia content in it that took a while to load. Looking at a white screen just did not look right. Now it doesn’t look like a bug/glitch anymore!

    Reply
  17. Mohan

    I have a page in my website that will display the PDF in one div after clicking a href in same page.
    So as PDF is big size it is time taking to load, so in mean while i have to display the loader before it’s load.
    Once my PDF is loaded i have to hide that loader.
    Please help me out.

    Regards
    Mohan

    Reply
    1. Brad Knutson Post author

      Mohan,

      PDFs won’t work because of how the browsers handle them. When you load a PDF, you are actually downloading the file to a temporary folder, then rendering it in the browser using Adobe Reader or the browsers built in PDF viewer. This is evident when you open PDFs in different browsers, as the loading icons and controls all look different. The example this post was built for was to display a loading animation while DOM elements were loading, including media assets like images.

  18. Darko

    Hey, thanks for this cool tip. Can you tell me how can I display an html file (it just says loading) before my main page loads, but I would like it to display at least 2 seconds, even if the main page is loaded. Thanks.

    Reply
  19. Aaron Basaiawmoit

    Thanks a lot for the well written tutorial Brad :). Really easy to implement and it looks good too :) Cheers

    Reply
  20. J D

    Very nice…

    I had a question related to this. How do you setup this div when the delay is not because of page load but transition from one page to another. Like a heavy middle tier invocation. We might want to disable the screen as soon as the button is clicked all the way to the display of the next page and not just during load of the next page.

    How do we go about this ?

    Reply
    1. Brad Knutson Post author

      What you’re looking to do is a little more complicated than this example, and will require some custom Javascript and AJAX to accomplish.

  21. Yuri

    Hello Brad,
    I followed your instructions to write a test page.But the page infinitely display the loading image. What happened?Here is my code.

    Reply
    1. Brad Knutson Post author

      Yuri – it could be a couple things.

      First – if you’re using WordPress, the script will fail because you are using the ‘$’ symbol. Replace it with ‘jQuery’ like so:

      Let’s see if that fixes it. If not – let me know.

    2. Brad Knutson Post author

      You won’t be able to paste HTML in the comments here. Can you link me to a JSFiddle or something else instead?

  22. Yuri

    Hello Brad,
    I’ve confronted another question. In the WordPress backend manage plantform. In the customizer, I add the style of loader and js code in the “custom” part. And add the in the php page. But the page seems doesn’t load the jquery ,so the page stays in the loading image. So what do you think so?Many thanks.

    Reply
    1. Brad Knutson Post author

      It might be better to create your own .js file in your theme, and use wp_register_script() in your functions.php file to add it to the document. I’m not sure what “custom” Javascript area you are referring to.

      Also remember to note that WordPress has issues with the $, so don’t use that jQuery syntax.

  23. رها

    Hi Brad
    Thanks for sharing this useful Article
    Please help me if you know windows 8 loading screen for wordpress ?
    I really like to show windows 8 or 8.1 loading for my wordpress website
    help me if you know it’s code or plugin for to show it for a 10 second at the my homepage every time homepage is loading
    Great Thanks
    Great regards :
    Raha

    Reply
  24. Scott

    Dear Mr. Knutson,

    I was wondering of you could help Me. I have tried your code, but the problem I am facing here is the Gif only appears once the page has loaded. What I want is for the loader gif to appear while the page is actually loading & maybe add a progress bar to it. I hope I am making sense here. If you have any thought to help Me out. It would be greatly appreciated.

    Many thanks, Scott Hawkins of Hawk Web Technologies.

    Reply
  25. Dave

    I have put your code into a page I’ve made and it is working, but not quite the way I would like. I am using a php script to dynamically create the html page. Loading the script is time intensive. It pulls data from other sites to create a table. With your code right now, the page starts loading.. and nothing displays.. then the script takes time to run… then the spinner displays.. and quickly after that the table loads. I’ve followed your instructions for the placement of your script but I’m wondering if I rearrange the order of things if it would work better (spinner loads right away, slow php script runs, final page displays). Do you have any ideas or suggestions of how I could arrange the code to do this?

    It seems like the front page, spinner page won’t show until my slow script finishes.

    Reply
  26. Adretweet.com

    Thank you for sharing. This is so great. I install it on one of my pages which loads a lot data and apparently it’s very slow because i am using PHP / MySql LEFT JOIN to check data in two huge tables, so many times my members guess there is nothing to see and they probably scare away LOL. This will help them to understand that data is loading… Thanks again

    Reply
  27. Weaver

    Thanks. Very useful. Really love it.

    I have managed to implement this into my website to show the spinner whilsta PHP script is running. Only problem is the spinner does not show when I am using my iPad. It strangely only shows when I am using a pc.

    Any ideas?

    Reply
  28. Kyle

    Thank you! This is perfect and exactly what I needed to hide some unsightly slider loading on a music site I’m building!

    Reply

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">