CODEWITHSUNDEEP
javascriptjquery
DGT
DGT

Reputation: 2654

html page loading message

My html page loads a bit slowly because of the jquery that's in it. I want an image that tells the user that it's loading, until the entire page get loaded. How should I go about doing this?
Many thanks in advance.

<script type="text/javascript">
   $(document).ready(function(){
      //my jquery here....

   });
</script>

Upvotes: 1

Views: 7557

Answers (6)

Adam Huddleston
Adam Huddleston

Reputation: 104

I know this a fairly old thread, but the below solution worked for me although jQuery is 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.

Try AJAXLoad They have some great animated GIF's there.. :)

Upvotes: 0

bevacqua
bevacqua

Reputation: 48476

have a background-image set through css to the body, and remove the element in document.ready

Upvotes: 0

smart alec 43
smart alec 43

Reputation: 151

Justin's method will do the trick.

make sure you are optimizing the way resources are loaded, for example putting your scripts at the bottom of the page so they don't block HTML rendering

http://developer.yahoo.com/performance/rules.html

Upvotes: 1

netadictos
netadictos

Reputation: 7722

http://www.jsfiddle.net/dactivo/m4Bxe/

window.onload = function () {

$("#loading").hide();    

   };

window.onload will wait the whole loading of the page. ready() waits the DOM to be ready which is practically inmediate.

You can read this in these jquery docs

"While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready,"

Upvotes: 1

LostInTheCode
LostInTheCode

Reputation: 1744

Hm, you can load an image that says "loading", then load the rest of the document's scripts by either doing something like:

var TM_script = document.createElement('script');TM_script.src = 'http://www.yoursite.com/script.js';document.getElementsByTagName('body')[0].appendChild(TM_script); someFunctionInScript();

Alternatively, you can just load the image, and then submit Ajax requests to load the rest of the page. You can also try even doing an animated gif or another image at the top of the page, and once the document has loaded (and your script activates), remove that image.

Upvotes: 0

Justin Niessner
Justin Niessner

Reputation: 245389

Design the page with the loading message already included so that when the page loads from the server, the message is already showing.

Then, using jQuery, you can hide the message as soon as the page is ready:

$(document).ready(function(){
    $('#loadingMessage').hide();
});

Upvotes: 11

Related Questions