为什么我使用 css 时我的页面没有加载？

Question

I have my page at this site: www.rootscope.in

When I use css, particularly this one below:

.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 routing:

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

Some of the script used in this template:

<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>

I have this line in the script tag:

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

The page keep showing the loading svg icon animation. When I inspect the page in chrome and remove the .loader class, the page loads but with some styles missing. I could have checked for errors but I purchased this html/css template from a site and I applied angular to it. I don't understand what is problem with .loader class

Answer 1

A common issue is to load scripts after DOM is loaded, but before AngularJS runs script to load the template page.

You should only hide ".loader" after Angular. Simplest solution (but not scalable) is just to put it in the angular controller:

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

Answer 2

Actually the loader element is not found on the document load because content is not yet loaded. So use setTimeout here for few seconds then it works prefectly.

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