Question

我使用角度创建了一个网页。我的页面加载非常慢。花5到10秒。同时，我想展示一些加载图像或旋转gif。

在下面的js小提琴中，javascript中出现上述问题。我想在angular js

中使用此功能

HTML

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

JS

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";
  },10000);
 }
}

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)

`http://jsfiddle.net/d9ngT/

Answer 1

您需要使用ngCloack。 https://docs.angularjs.org/api/ng/directive/ngCloak

如果您需要在角度应用启动时定义全屏加载器，请在页面上创建din元素并为其分配ng-cloack和.ng-cloack { z-index: 9999; } .full-screen-loader { position: fixed; width: 100%; height: 100%; z-index: -9999; }

类

你的css

<div class="full-screen-loader ng-cloak">
  <img class="additional-styling" src="some-loader.gif">
</div>

你的HTML

apply

在加载角度应用程序时，ng-clock类会将加载程序容器的z-index设置为页面上每个其他内容的顶部。当加载角度时，您的装载器容器将被带到页面上的每个东西的底部。另外我想提一下，你可能需要为body和html标签添加一些样式，这样你的加载器就会占用所有浏览器的窗口空间。

如何加载加载图像/旋转gif直到加载index.html页面？

1 个答案: