HTML加载动画
问题描述：
我有一个网站，当页面未加载时丢失布局方案。HTML加载动画
我想要做的是有一个动画链接到加载进度，如进度条，但没有酒吧。
例如，一个将进度链接到徽标不透明度的简单动画。所以，当页面被加载50％时，标识为50％不透明;当标识为100％时，该页面已加载并且加载进度为.fadeOut()。
我知道我可以使用$(window).load()隐藏动画<div>。我不知道如何将动画的进度和不透明度联系起来。
有没有一种“简单”的方法来实现这一目标？
我已搜索jQuery plugins，但我只找到进度条加载。
答
此使用一些基本的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";
什么我不知道如何得到是DOM的加载进度... – PedroMendes
现在所有更新，这是否完全回答你的问题？ – Stormie
谢谢！ :)我会尽量让这个设置和运行; D – PedroMendes