Почему моя страница не загружается, когда я использую 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. Когда я проверяю страницу в хроме и удаляю класс .loader, страница загружается, но некоторые стили отсутствуют. Я мог бы проверить ошибки, но я купил этот шаблон html/css с сайта, и я применил его угловыми. Я не понимаю, в чем проблема с .loader class

Answer 1

Общая проблема для загрузки скриптов после загрузки DOM, но перед AngularJS запускает скрипт для загрузки страницы шаблона.

Вы должны скрыть «.loader» после Angular. Простейшее решение (но не масштабируется) просто положить его в угловом контроллер:

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

Answer 2

Фактически элемент загрузчика не найден при загрузке документа, поскольку контент еще не загружен. Так что используйте setTimeout здесь в течение нескольких секунд, тогда он работает префект.

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