显示加载图标，直到页面加载完毕？
我想向用户显示一个加载图标，直到页面元素完全加载为止。如何使用javascript做到这一点，而我想使用javascript而不是jquery做到这一点？
这是一个链接，谷歌是怎么做到的？在onload事件或类似事件上触发某些功能..我知道它会以这种方式或任何其他方式完成？还是有一些事件吗？
更新 我使用显示属性做了一些操作，我隐藏了body元素，但是body标签的onload更改了它的属性，但是在哪里放置了加载图标并添加了更多的交互性。
问题答案：
的HTML
<body>
<div id="load"></div>
<div id="contents">
jlkjjlkjlkjlkjlklk
</div>
</body>
JS
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
document.getElementById('contents').style.visibility="hidden";
} else if (state == 'complete') {
setTimeout(function(){
document.getElementById('interactive');
document.getElementById('load').style.visibility="hidden";
document.getElementById('contents').style.visibility="visible";
},1000);
}
}
CSS
#load{
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif") no-repeat center center rgba(0,0,0,0.25)
}
注意：
如果您的页面加载速度很快，您将看不到任何加载gif，因此请在加载时间较长的页面上使用此代码，我也建议您将 js 放在页面底部。
-
问题内容： 我的网站上有一个版块，在进行一些密集的通话时加载速度很慢。 知道如何div在页面准备时显示类似于“加载”的内容，然后在一切准备就绪时消失吗？ 问题答案： 我需要这个，经过一番研究，我想到了这个（需要jQuery）： 首先，在标签之后添加以下代码： 然后将div和图片的样式类添加到CSS： 然后，将此JavaScript添加到您的页面中（当然，最好在页面结尾处，在结束
-
问题内容： 在数据完成加载之前，如何使AngularJS显示加载微调框？ 如果我的控制器是静态设置的，并且填充了AJAX加载器，我希望微调器显示直到AJAX加载完成，然后使用检索到的数据填充绑定范围。 此代码立即填充绑定范围，并且如果为空，则微调框将被替换为空。 我应该如何干净地做这件事？ 问题答案： 我会根据其他答案创建一个自定义指令，但是这是没有指令的情况下如何实现的，这可能是在进入更复杂的功
-
问题内容： 我尝试在我的网站中实施AJAX。单击div changepass的内容时，则应加载changepass.template.php。这是我为此使用的代码。 我的问题是在页面changepass.template.php完全加载时如何显示GIF动画（loading.gif）。请给我一些代码提示。 问题答案： 有很多方法可以做到这一点。一种简单的方法： JS： 詹姆斯·怀斯曼 （ James
-
ap.showNavigationBarLoading() 显示导航栏加载图标。 代码示例 <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script> <button class="btn btn-default">showNavigationB
-
问题内容： 我使用AJAX在页面A上显示页面B的内容。 如何在内容显示之前让jQuery等待所有内容加载（文本，图像等）？ 当处理AJAX请求时，我使用beforeSend向用户显示加载动画。现在，我想“延长”等待时间，以便在加载所有图像之前加载动画不会消失。 我最初尝试隐藏附加数据，等待所有图像加载，然后显示内容- 内部但事件似乎没有触发。 有任何想法吗？ 更新： 更新的代码： 问题答案： 您必
-
问题内容： 当有人首次访问页面时（登录我的应用程序后），我试图显示一种引导模式。我想使用模式来提供“入门”视频，并提供“不要再向我展示”复选框，以便访问者可以在以后的登录时绕过“入门模式”。 我可以使用以下教程在页面加载时显示模式： 在页面加载时启动Bootstrap Modal 但是，现在我只停留在如何使它仅在用户登录后第一次访问该页面时显示它（它当前在刷新页面时启动等）。 我是Java语言和编