Javascript在刷新时显示加载程序图标

当窗口刷新时，我需要显示加载程序图标。当文档准备好时，它应该隐藏。我尝试了什么

//一个解决方案

<script>
document.onreadystatechange = function () {
  var state = document.readyState
  if (state == 'complete') {
      setTimeout(function(){
          document.getElementById('interactive');
          document.getElementById('load').style.visibility="hidden";
      });
  }
}
</script>

document.onreadystatechange=函数（）{
var state=document.readyState
如果（状态==“完成”）{
setTimeout（函数（）{
document.getElementById（'interactive'）；
document.getElementById（'load'）.style.visibility=“hidden”；
});
}
}

//另一个解决方案

<script>
window.onbeforeunload = function WindowLoad() {
inst.close();
inst.destroy();
document.getElementById('load').style.visibility="block";
}
window.onload = function WindowLoad() {
      setTimeout(function(){
    document.getElementById('interactive');
    document.getElementById('load').style.visibility="hidden";
      });
}
</script>

window.onbeforeunload=函数WindowLoad（）{
仪器关闭（）；
指令销毁（）；
document.getElementById（'load'）.style.visibility=“block”；
}
window.onload=函数WindowLoad（）{
setTimeout（函数（）{
document.getElementById（'interactive'）；
document.getElementById（'load'）.style.visibility=“hidden”；
});
}

//加载器样式-用户参考

<style>
#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(129, 129, 131, 1)
 }
</style>

#装载{
宽度：100%；
身高：100%；
位置：固定；
z指数：9999；
背景：url（“https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif）无重复中心rgba（129、129、131、1）
}

我得到了什么？ 页面刷新完成后，我将获得一次加载程序图标？我尝试运行两个解决方案，对每个解决方案进行注释。

您还需要

$(document).ready(function(){
  $('loaderid').hide();
});

---

确保加载器元素正好位于body标记的开始之后。

对于非jQuery方法

添加一些css来隐藏您的div，例如

mydiv{display:none；}

加载后，从div中添加/删除mydiv类：

document.getElementById（'div1'）.classList.remove（'mydiv'）； document.getElementById（'div1'）.classList.add（'mydiv'）

---

加载div可能会延迟显示，如果您稍后将其放在HTML中，您可以尝试将加载div作为任何其他代码之前的第一件事注入页面

<title>Smart Page</title>
<script type="text/javascript"> 
document.write('<div id="loading"><p><b>LOADING</b>...</p></div><style type="text/css">#loading{display:block; otherstyles..}</style>');
</script>

---

您将加载程序div放置在html

document

中的何处？加载程序div大约在加载html时准备就绪<加载图像和其他外部资源时，将加载代码>窗口。因此，这取决于您想要的方式；试试这个，上面的解决方案与我的第一个解决方案的工作方式相同。但对我来说，浏览器刷新时应该显示加载器图标。当文档准备就绪时，加载器图标应该停止。如果页面需要一段时间才能“加载”，这可能是因为有很多jquery文档准备就绪-在这种情况下，我还将在

.hide（）

周围添加一个小的

setTimeout

，这样它也会等待所有的js/jquery完成初始化。是的，这是个聪明的主意。

<script type="text/javascript">

$(window).load(function() { 
    $('#loading').fadeOut(500);
}); 

</script>