顯示ajax微調，隱藏頁面渲染，直到所有ajax調用完成？

Question

我正在構建一個帶有大量Ajax調用的Web應用程序，我正在使用它來將所有內容注入到我的Web應用程序中。

我希望能找到一種方法來隱藏頁面，並顯示了ajax微調，直到所有的Ajax調用完成...和/或整個應用程序被加載，然後顯示該網站。

否則用戶可以瀏覽的是A.可能不能完全正確地呈現或B.將是中期導航時，該網站刷新首頁滿載時的頁面。

我碰到一個解決方案的膽量，但不知道如何實現。或者把兩者結合起來... 學院項目從親，但這些看起來前途無量那麼遠，

https://stackoverflow.com/a/14038050

$(document).ajaxStop(function() { 
     // $.active == 0 
    }); 

https://stackoverflow.com/a/12313138/2676129

$(document).ajaxStart(function() { 
    $.mobile.loading('show'); 
}); 

$(document).ajaxStop(function() { 
    $.mobile.loading('hide'); 
}); 

如何可能我得到這個工作？我的Ajax調用跨越多個.js文件（應用程序的不同部分）

非常感謝您的幫助引用！

編輯：例如Ajax調用使用

$.ajax(
     { 
      url: "http://myurl", 
      type: 'get', 
      dataType: 'jsonp', 
      success: function(data) 
      { 
       if (data.result == 'success') 
       { 
        var previousPageID = ""; 
        var currentPageID = ""; 
        $.each(data.data, function(key, data)     //scans through each Lv1 Category, creates a button and page and links thems. 
        { 
         var divLabel = data.label; 
         var pageID = currentPageID + data.label.replace(/\s/g, ""); 
         $('#contentPage').append(generateButtons(pageID, divLabel));              //generates a normal button for a category from CMS and generates the relevant page to link to. 
         var previousPageID = currentPageID; 
         generateNextPage(data, previousPageID); 
        }); 
        $("#Page").trigger("create");            //once html is injected into home <div> applies jquery mobile styling and effects (enhance) 
       } 
      } 
     }); 

Answer 1

只是想指出一個簡單的解決方案，但尚未生效。 您將需要將此加載div附加到您的頁面。

<div id="loading"></div> 

之後，我們確保當ajax調用分別開始和停止時，這個div將被顯示或隱藏。

$(document).ajaxStop(function() { 
     $('#loading').hide(); 
    }); 

    $(document).ajaxStart(function() { 
     $('#loading').show(); 
    }); 

最後，添加以下的CSS，以確保在div將全屏顯示像阻塞UI元素（這表明頁面加載的東西的/不是微調）。

#loading { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
    background-color: rgba(0,0,0,.5); 
    -webkit-transition: all .5s ease; 
    z-index: 1000; 
    display:none; 
} 

Demo JSFIDDLE here

Answer 2

一種方法是將顯示您加載動畫爲初始&網頁頁面加載的一部分。

然後，等待你的優秀Ajax調用達到零，一旦出現這種情況，隱藏加載動畫。

您的文檔準備將類似於：

$(document).ready(function() { 
    $('#spinner').addClass('spin'); 

    function stopSpinner() { 
     $('#loading').addClass('hide'); 
     $('#loading').one('webkitTransitionEnd', function() { 
      $('#loading').hide(); 
     }); 
    } 

    $(document).ajaxStop(function() { 
     // $.active == 0 
     stopSpinner(); 
    }); 
}); 

您的標記將有這樣的事情在體內最後一個元素：

<div id="loading"> 
    <div id="spinner"></div> 
</div> 

使用樣式是這樣的：

#loading { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0,0,0,.5); 
    -webkit-transition: all .5s ease; 
    z-index: 1000; 
} 

#loading.hide { 
    opacity: 0; 
} 

#spinner { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -50px; 
    background-color: yellow; 
    -webkit-transition: all 1000s linear; 
} 

#spinner.spin { 
    -webkit-transform: rotate(100000deg); 
} 

的很長的過渡時間和大轉動是否有來模擬一個永遠的怡敏信。你也可以用CSS3動畫，動畫GIF或其他替代它來獲得你想要的效果。

Demo fiddle（注：它只是使用的setTimeout僞造回調隱藏裝載機）