JQuery: animated element before page loading

Question

I want to create the impression of a preloader for my site. I have <div class="loading">one that should fade and fade until the content is loaded <div id=page-wrap>.

Now I am using a temporary solution for guesswork, but of course it is inaccurate:

<script type="text/javascript">
// fade site in when loaded
$("#page-wrap").css("display", "none");
$(window).bind("load",function(){
    $("#page-wrap").fadeIn(2000);
});

// blink markers
$(".loading").hide();
$(".loading").fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200);
</script>

How can I make this more complicated and actually bind fadeIn / fadeOut to the page load?

Answer 1

A bit of a weird setup, but what the hell :)

Try something like this:

<script type="text/javascript">
  $("#page-wrap, .loading").hide();
  $(window).load(function(){
    $(".loading").stop(true, true).hide();
    $("#page-wrap").fadeIn(2000);
  });
  function fadeLoop() {
    $(".loading").fadeIn(200).fadeOut(200, fadeLoop)
  }
  fadeLoop();
</script>

This makes the damping cycle repeat until it stops, which will be .stop()without calling a callback fadeLoopand stopping the cycle.