How to show Page Loading image/div/text until the page has finished loading/rendering

Question

Hiya,

I have a section on our website that loads quite slowly as it's doing some intensive calls. Any idea how i can get a div to say something similar to "loading" to show while the page prepares itself and then vanish when everything is ready?

Cheers

Answer 1

Default the contents to display:none and then have an event handler that sets it to display:block or similar after it's fully loaded. Then have a div that's set to display:block with "Loading" in it, and set it to display:none in the same event handler as before.

Answer 2

Create a <div> element that contains your loading message, give the <div> an ID, and then when your content has finished loading, hide the <div>:

$("#myElement").css("display", "none");

...or in plain JavaScript:

document.getElementById("myElement").style.display = "none";

Answer 3

Wellp, this largely depends on how you're loading the elements needed in the 'intensive call', my initial thought is that you're doing those loads via ajax. If that's the case, then you could use the 'beforeSend' option and make an ajax call like this:

$.ajax({
  type: 'GET',
  url: "some.php",
  data: "name=John&location=Boston",

  beforeSend: function(xhr){                           <---- use this option here
    $('.select_element_you_want_to_load_into').html('Loading...');
  },

  success: function(msg){
    $('.select_element_you_want_to_load_into').html(msg);

} });

EDIT I see, in that case, using one of the 'display:block'/'display:none' options above in conjunction with $(document).ready(...) from jQuery is probably the way to go. The $(document).ready() function waits for the entire document structure to be loaded before executing (but it doesn't wait for all media to load). You'd do something like this:

$(document).ready( function() {
  $('table#with_slow_data').show();
  $('div#loading image or text').hide();
});

Answer 4

Window.unload works well. Just place this on your pages. (Example using jQuery):

<script type="text/javascript">
$(window).unload(function() {
    var html = "<img src='html/loading.gif' />";
    $('#loading').append(html);
});
</script>

<div id="loading" />    

Answer 5

Hi all,

I've needed this and after some research on the internet i came up with this (jQuery needed):

First right after the body tag add this:

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

Then add the style class for the div and image to your css:

#loading {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):

<script language="javascript" type="text/javascript">
  $(window).load(function() {
    $('#loading').hide();
  });
</script>

Then adjust the position of the loading image and the background color of the loading div via the style class.

This is it, works just fine. But of course you have to have an ajax-loader.gif somewhere.

Answer 6

I have used the first script posted & I like it, how do I make it stop loading & bring in the page?