jQuery:动画元素直到页面加载

Question

我想为我的网站营造预加载器的印象。我有<div class="loading">应该淡入和淡出，直到 <div id=page-wrap> 的内容已加载。

现在我正在使用基于时间的解决方案来猜测，但它当然不准确:

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

如何使其更加复杂，并将淡入/淡出实际绑定(bind)到页面加载？

Answer 1

有点奇怪的设置，但到底是什么:)

尝试这样的事情:

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

这会重复淡入淡出循环直到停止，.stop()会做，不调用fadeLoop回调，并停止循环。