Why isn't my page loading when I use 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

@MehdiDehghani All the code is in the website. You can check source. — kittu, Sep 11 '16 at 15:09
`.loader` element is being downloaded dynamically by angular. When you give the command to "End Loader" it still doesn't exists. — Andre Figueiredo, Sep 11 '16 at 15:11
I'm afraid but you need to put relevant codes here. it's the way that Stackoverflow works. — Mehdi Dehghani, Sep 11 '16 at 15:16
@MehdiDehghani I put the code that is causing the issue. Rest of code is a lot to put into question so I shortened it — kittu, Sep 11 '16 at 15:17
At least show the complete code that you used for `fading out` the `loader`. btw I think if you using `setTimeout` your code will work. if so, you need to change the way for deal with the loader. — Mehdi Dehghani, Sep 11 '16 at 15:20
Can you change the code to `setTimeout(function(){$('.loader').fadeOut('slow');}, 5000);` and report the result? — Mehdi Dehghani, Sep 11 '16 at 15:24
Related [How to do preloader for `ng-view` in Angular JS?](http://stackoverflow.com/questions/30107459/how-to-do-preloader-for-ng-view-in-angular-js) — Mehdi Dehghani, Sep 11 '16 at 15:28
@MehdiDehghani I tried the `setTimeout()` but it doesn't load the `.loader` at all and styles go missing. — kittu, Sep 11 '16 at 15:30
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/123112/discussion-between-mehdi-dehghani-and-satyadev). — Mehdi Dehghani, Sep 11 '16 at 15:33

score 1 · Accepted Answer · answered Sep 11 '16 at 15:25

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

score 0 · Answer 2 · answered Sep 11 '16 at 15:23

0

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

answered Sep 11 '16 at 15:23

bvakiti

3,243
4
17
26

It's not the solution, because maybe the load time be more than 1000 – Mehdi Dehghani Sep 11 '16 at 15:25

Why isn't my page loading when I use css?

2 Answers2