在页面加载之前显示加载图标？

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

这是一个链接，谷歌如何做到这一点我该怎么做？在 onload 事件或类似的事情上触发某些功能.. 我知道它会像这样或任何其他方式来完成？或者有什么活动？

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

原文由 Sky 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 738

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("/loading.gif") no-repeat center center rgba(0,0,0,0.25)
}

笔记：

如果您的页面加载速度很快，您将看不到任何加载 gif，因此在加载时间较长的页面上使用此代码，我还建议将您的 js 放在页面底部。

演示

http://jsfiddle.net/6AcAr/ - 超时（仅用于演示）

http://jsfiddle.net/47PkH/ - 没有超时（用于实际页面）

更新

http://jsfiddle.net/d9ngT/

原文由 Viscocent 发布，翻译遵循 CC BY-SA 4.0 许可协议

在页面加载之前显示加载图标？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

Stack Overflow 翻译