Loading screen using jquery

Question

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

I want to display a full page loading screen using jquery. I never used loading before so i am confused. all i want to do is hide other elements untill all scripts css images and content are loaded. How do i do it?

Answer 1

Very simple:

1. Create a div to fill the screen, you can put the loading image or text in there
2. At the end of you html file, or by using jquery $(document).ready(function(){ ... }); remove the divs.
3. you mentioned all 'IMAGES'... might need a little extra for that.

SO, in your html, make an fixed or absolute div with 100% width and height.. (i suggest turning the overflow to hidden so you don't have scroll bars (width +padding + margin = >100%)

<div id='loading_wrap' style='position:fixed; height:100%; width:100%; overflow:hidden; top:0; left:0;'>Loading, please wait.</div>

Either you can put it in the head as this:

<script type='text'javascript'>
$(document).ready(function(){
    $('#loading_wrap').remove();
});
</script>

Or add this at the end of your html page, (right before the closing html tag):

<script type="text/javascript">$('#loading_wrap').remove();</script>

This might not wait for the pictures to be loaded, for this you would be a loop that check if the pic are loaded before triggering the .remove();