html page loading message

Question

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>

Answer 1

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();
});

Answer 2

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.

Answer 3

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,"

Answer 4

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

Answer 5

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