HTML加载动画 [英] HTML Loading Animation
问题描述
我想要做的是将动画链接到加载进度，就像一个进度条，但没有栏。
例如，一个简单的动画，将进度链接到徽标的不透明度。所以，当页面被加载50％时，标识为50％不透明;当标识为100％时，该页面已加载，加载进度将 .fadeOut（）。
我可以使用 $（window）.load（）来隐藏动画< div> 。我不知道如何将动画的进度和不透明度联系起来。
有没有一种简单的方法来达到这个目的？
我搜索了 jQuery插件，但我只找到了进度条加载。
一些基本的 CSS ，然后编写一个函数到 update 您分配给页面CSS的值，当页面未加载/加载栏不完全不透明时，它将继续运行。
这可以通过JQuery或JavaScript轻松实现。
要实际获取有关DOM加载的信息，可以使用进度活动。
Progress Progress文档中给出的例子是这样的：
<！DOCTYPE html>
< title>等待魔法独角兽< / 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;
I have a website that loses layout scheme while the page isn't loaded.
What I'd like to do is to have an animation linked to the loading progress, like a progress bar but without the bar.
For example, a simple animation that would link the progress to the opacity of the logo. So, when the page was 50% loaded, the logo was at 50% opacity; when the logo was 100% the page was loaded and the loading progress would .fadeOut().
I understand I can use $(window).load() to hide the animation <div>. I don't know how I can relate the progress and the opacity of the animation.
Is there a 'simple' way to achieve this?
I have searched for jQuery plugins, but I only found progress bar loads.
You could easily achieve this using some basic CSS, and then writing a function to "update" the value you assign to the CSS of the page that would, while the page is not loaded/the loading bar is not fully opaque then it will carry on running.
This can easily be achieved with JQuery or JavaScript.
To actually get information on the loading of the DOM, you can use Progress Events. The example given in the documentation of Progress Events is this:
<!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>
So in this example you are loading "magical-unicorns", and assigning the parapgraph <p> the current loaded percentage.
To change this to modify the CSS I would use JavaScript to change your opacity eg. document.getElementById("myLoadBar").style.opacity = "0.5";
这篇关于HTML加载动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
