HTML加載動畫

我有一個網站，當頁面未加載時丟失佈局方案。HTML加載動畫

我想要做的是有一個動畫鏈接到加載進度，如進度條，但沒有酒吧。

例如，一個將進度鏈接到徽標不透明度的簡單動畫。所以，當頁面被加載50％時，標識爲50％不透明;當標識爲100％時，該頁面已加載並且加載進度爲.fadeOut()。

我知道我可以使用$(window).load()隱藏動畫<div>。我不知道如何將動畫的進度和不透明度聯繫起來。

有沒有一種「簡單」的方法來實現這一目標？

我已搜索jQuery plugins，但我只找到進度條加載。

來源

2015-07-13 PedroMendes

此使用一些基本的CSS，然後寫一個函數你可以很容易地實現對「更新」分配給頁面的CSS的值會，雖然沒有加載頁面/加載欄不完全不透明，那麼它將繼續運行。

這可以通過JQuery或JavaScript輕鬆實現。

要實際獲取有關DOM加載的信息，可以使用Progress Events。進度事件的文檔中給出的例子是這樣的：

<!DOCTYPE html> 
<title>Waiting for Magical Unicorns</title> 
<progress id="p"></progress> 
<script> 
    var progressBar = document.getElementById("p"), 
     client = new XMLHttpRequest(); 
    client.open("GET", "magical-unicorns"); 
    client.onprogress = function(pe) { 
    if(pe.lengthComputable) { 
     progressBar.max = pe.total; 
     progressBar.value = pe.loaded; 
    } 
    } 
    client.onloadend = function(pe) { 
    progressBar.value = pe.loaded; 
    } 
    client.send(); 
</script>

因此，在這個例子中，你正在加載「的神奇，獨角獸」，並分配parapgraph <p>當前加載的百分比。要改變這個來修改CSS，我會使用JavaScript來改變你的不透明度，例如。 document.getElementById("myLoadBar").style.opacity = "0.5";

來源

2015-07-13 12:35:22 Stormie

什麼我不知道如何得到是DOM的加載進度... – PedroMendes

現在所有更新，這是否完全回答你的問題？ – Stormie

謝謝！ :)我會盡量讓這個設置和運行; D – PedroMendes

回答

相關問題