When page is loading, display a image after 5 seconds swap with text.

Question

I have a div that has content in it.

<section id="latest-news">
  <p>Pellentesque habitant morbi
  tristique senectus et netus
  et malesuada fames ac turpis
  egestas.</p>
</section>

But while the page is loading, I want a loading .gif to appear, wait about 5 seconds and the the text. With a fadeIn or slide down animation too. (The text would be hidden by default)

I tried for an hour on this but I can't get it to work :/

What is a way to do this?

Answer 1

<div id='loading'><img src='loading.gif' /></div>
<div id='content' style='display:none'><p>content here</p></div>

<script type='text/javascript'>
$(document).ready(function(){
  setTimeout(function(){
    $('#loading').hide(); 
    $('#content').fadeIn();
    }
  , 5000);
}
</script>

I'm not sure if you can put anonymous function inside setTimeout, but that's the general idea.