Question

我需要在窗口刷新时显示加载器图标。它应该在文档准备好时隐藏。我试过了什么

//一个解决方案

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

//另一种解决方案

<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>

//用于loader的样式 - 用户参考

<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>

我得到了什么？页面刷新完成后，我收到加载程序图标一次？我尝试运行两个解决方案，评论每个解决方案。

Answer 1

Here it is您还需要

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

确保加载程序元素位于body标记的开头。

Answer 2

对于非jQuery方法。

添加一些css来隐藏你的div，例如mydiv { display:none; }
加载后，从div中添加/删除mydiv类：

的document.getElementById（＆＃39; DIV1＆＃39）。classList.remove（＆＃39; mydiv＆＃39）; 的document.getElementById（＆＃39; DIV1＆＃39;）classList.add（＆＃39; mydiv＆＃39）;

Answer 3

如果您稍后将HTML放入HTML中，加载div可能会显示较晚，您可以尝试在任何其他代码之前将加载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>

如果您希望加载包括图片在内的所有资源，请使用window.load，或使用document.ready。在</body>

之前将此代码保留在页面末尾更安全

<script type="text/javascript">

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

</script>

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

3 个答案: