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> 

我怎樣才能讓這個更復雜，更實際的淡入/淡出結合頁面加載？

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回調，並停止循環。