显示加载图标，直到页面加载完毕？

小编典典

显示加载图标，直到页面加载完毕？

css

我想向用户显示一个加载图标，直到页面元素完全加载为止。如何使用javascript做到这一点，而我想使用javascript而不是jquery做到这一点？

这是一个链接，谷歌是怎么做到的？在onload事件或类似事件上触发某些功能..我知道它会以这种方式或任何其他方式完成？还是有一些事件吗？

更新我使用显示属性做了一些操作，我隐藏了body元素，但是body标签的onload更改了它的属性，但是在哪里放置了加载图标并添加了更多的交互性。

阅读 452

2020-05-16

共1个答案

小编典典

的HTML

<body>
    <div id="load"></div>
    <div id="contents">
          jlkjjlkjlkjlkjlklk
    </div>
</body>

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 放在页面底部。

2020-05-16