我的网站在未加载页面时丢失了布局方案。
我想做的是有一个链接到加载进度的动画，就像一个进度条但没有进度条。
例如，将进度与 Logo 的不透明度相关联的简单动画。因此，当页面加载 50% 时， Logo 的不透明度为 50%；当 Logo 为 100% 时，页面已加载并且加载进度为 .fadeOut() .
我知道我可以使用 $(window).load()隐藏动画<div> .我不知道如何将动画的进度和不透明度联系起来。
是否有“简单”的方法来实现这一点？
我搜索了jQuery plugins ，但我只发现进度条加载。
最佳答案
您可以使用一些基本的 CSS 轻松实现此目的，然后编写一个函数来“更新”您分配给页面 CSS 的值，当页面未加载/加载栏不是完全不透明时，它将继续运行.
这可以使用 JQuery 或 JavaScript 轻松实现。
要实际获取有关 DOM 加载的信息，您可以使用 Progress Events . 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>
所以在这个例子中你正在加载“magical-unicorns”，并分配段落 <p>当前加载的百分比。
要更改它以修改 CSS，我会使用 JavaScript 来更改您的不透明度，例如。 document.getElementById("myLoadBar").style.opacity = "0.5";
关于jquery - HTML 加载动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31383451/