Adding a page loader using jQuery

Question

I need a little help. I do not know where to start. I need to add a page loader to my website. I first submit a form it then uses SimpleXML to call an exterior XML Sheet with expedia... It takes a minute to load, so I would like to add the image loader to this page. But how do I go about doing this? I have looked on Google and could not find any useful info.

I need it to show the loader until the COMPLETE page has loaded.

Shomz · Accepted Answer · 2012-04-28 19:54:45Z

17

This has many solutions, but a simple one is to:

1- Create an overlay DIV with your loader stuff and prepend to BODY;
2- Add an event listener for window.load or document.ready event that hides this DIV.

// On the first line inside BODY tag
<script type="text/javascript">
    jQuery("body").prepend('<div id="preloader">Loading...</div>');
    jQuery(document).ready(function() {
        jQuery("#preloader").remove();
    });
</script>

(code typos fixed)

edited Apr 28, 2012 at 19:54

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

answered Apr 28, 2012 at 17:24

Ricardo Souza

16.5k6 gold badges40 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ricardo Souza Over a year ago

Note: window.load fires first and then document.ready after the content finishes loading.

Ricardo Souza Over a year ago

Correcting: document.ready fires when all HTML has fineshed loading, but before the content, and window.load fires after the content finishes loading

Connor · Accepted Answer · 2012-04-28 20:04:45Z

4

Check out spin.js http://fgnass.github.com/spin.js/

var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
// Even more options available.... 
};
var target = document.getElementById('loading');
var spinner = new Spinner(opts).spin(target);

And once your form is done:

$("#loading").data('spinner').stop();

answered Apr 28, 2012 at 20:04

Connor

1,0344 gold badges16 silver badges24 bronze badges

Comments

Walf · Accepted Answer · 2019-02-08 05:30:21Z

2

This loader div will show a loading image on page load.

$(window).load(function() {
  $(".pageloader").fadeOut("slow");
});

body {
  background: black;/* for this demo */
}

.pageloader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('images/yourLoaderImage.gif') 50% 50% no-repeat rgb(249, 249, 249);
  opacity: .8;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="pageloader"></div>

It's Completely working for me.

edited Feb 8, 2019 at 5:30

Walf

9,4793 gold badges47 silver badges67 bronze badges

answered Oct 11, 2017 at 10:46

Nirendra Singh Panwar

613 bronze badges

3 Comments

mightyteja Over a year ago

For jquery versions >3, .load(), .unload(), and .error() removed, <script type="text/javascript"> $(window).on("load", function (e) { $(".pageloader").fadeOut("slow"); }); </script>

Nirendra Singh Panwar Over a year ago

Thanks @mightyteja for providing details for updated Jquery version.

Gaurav Agrawal Over a year ago

This is not working if I open link in a new tab and visit that tab after sometime. If you have any solution please let me know.

Collectives™ on Stack Overflow

Adding a page loader using jQuery

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related