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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

回答：

<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);
  }
}

#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，因此请在加载时间较长的页面上使用此代码，我也建议您将 放在页面底部。

以上是 显示加载图标，直到页面加载完毕？ 的全部内容， 来源链接： utcz.com/qa/405714.html

回到顶部