Ajax or Jquery loading until page is done rendering rails view page

Question

Ok so what i want to do seems pretty simple, but i'm not very family with ajax or jQuery in my rails app i mostly use Javascript for things like this.

So what i want to do is basically hide the content of the page or grey it out while showing the loading icon until everything is done loading, how would i go about doing this ?

if it matters i'm using rails 3.2.13

The reason i want to do this is on some slower browsers/computers i see basically all the elements as they render which i think is quite annoying

Ooh and would it be possible to add a delay? that is even after the page has finished rendering still have the page contents for a specific number of seconds?

Answer 1

I'd go with a style="z-index: 9999" (or, better, a css rule setting said property) div covering the whole body of the page. Then you can go with:

$(document).ready(function(){
 $("#imtheloadingdiv").fadeOut();
});

Or with waiting part (ie 3s timeout):

$(document).ready(function(){
  setTimeout(function()
  {
       $("#imtheloadingdiv").fadeOut();
  }, 3000);
});

(you can swap fadeOut for hide if you want to just make it disappear with no effects)