為什么我使用 css 時我的頁面沒有加載？

Question

我在這個站點有我的頁面： www.rootscope.in

當我使用 css 時，尤其是下面這個：

.loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(assets/img/icons/loader.svg) no-repeat center center #fe9d68;
    background-size: 60px;
}

HTML：

<div>
    <div id="content" class="container">
        <!--main content-->
        <div id="wrap">
            <div ui-view="content" id="content"></div>
        </div>
    </div>
</div>

角度路由：

angular.module('myApp').config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $locationProvider, $urlRouterProvider) {

// For any unmatched url, redirect to /login
$urlRouterProvider.otherwise("home");

$stateProvider
.state('home', {
    url: "/home",
    views: {
        content: {
            templateUrl: 'views/home.html',
            controller: function ($scope) {
            }
        },
    }
});

此模板中使用的一些腳本：

<script src="assets/js/jquery.countdown.min.js"></script>
<script src="assets/js/jquery.easydropdown.min.js"></script>
<script src="assets/js/jquery.flexslider-min.js"></script>
<script src="assets/js/jquery.isotope.min.js"></script>
<script src="assets/js/jquery.themepunch.tools.min.js"></script>
<script src="assets/js/jquery.themepunch.revolution.min.js"></script>
<script src="assets/js/jquery.viewportchecker.min.js"></script>
<script src="assets/js/jquery.waypoints.min.js"></script>

我在腳本標簽中有這一行：

$('.loader').fadeOut('slow'); // End Loader

頁面一直顯示加載 svg 圖標動畫。 當我在 chrome 中檢查頁面並刪除.loader類時，頁面加載但缺少一些樣式。 我本可以檢查錯誤，但我從一個站點購買了這個 html/css 模板，並對其應用了 angular。 我不明白.loader class什么問題

Answer 1

一個常見的問題是在加載 DOM 之后加載腳本，但在 AngularJS 運行腳本加載模板頁面之前。

你應該只在 Angular 之后隱藏“.loader”。 最簡單的解決方案（但不可擴展）只是將它放在角度控制器中：

function controller($scope){
   $('.loader').fadeOut('slow');
}

Answer 2

實際上，在文檔加載中找不到加載器元素，因為內容尚未加載。 所以在這里使用 setTimeout 幾秒鍾，然后它就可以完美地工作了。

$(document).ready(function(){
  setTimeout(function () {
    $('.loader').fadeOut('slow');
  }, 1000);
});