-3

I have a really simple Html web site (No server side code). Instead of replicate some HTML, I decided to use angularJs. Using some directives and some partial views, I could re-use some code without replicate it.

I created a directive for preloader, but I have a problem.. The preloader is shown a bit later than the loading of the page... What I mean is that some images and text are loaded, then the preloader appear, and finally when the document is ready the preloader disappear... It's really annoying!!

I would like that the preloader appeared immediately before of everything, but perhaps in that moment angular has not been loaded yet. I don't know If I am clear.

In any case, here you can see what I mean:

the example

Here my code:

HTML PAGE 

<head>
    ...
    <script src="/js/angularjs-1.4.8.min.js"></script>
    <script src="/js/angularjs/app.js"></script>
    <script src="/js/angularjs/directives/preloader.js"></script>
</head>
<body ng-app="renovahaus">
    <rh-preloader></rh-preloader>
    ...
</body>

JS - DIRECTIVE

angular.module('renovahaus')
    .directive('rhPreloader', ['$document', function ($document) {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: '/partial_views/directives/templates/preloader.html',
            link: function (scope, element, attr) {
                $document.ready(function () {
                    /*will first fade out the loading animation*/
                    $(element).find("#status").fadeOut();

                    /*will fade out the whole DIV that covers the website.*/
                    $(element).delay(1000).fadeOut("slow");

                    $("body").css('overflow-y', 'visible');
                    $("body").css('position', 'relative');
                });
            }
        };
    }]);

HTML - TEMPLATE DIRECTIVE

<div class="preloader">
    <div id="status"></div>
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div class="object" id="object_four"></div>
            <div class="object" id="object_three"></div>
            <div class="object" id="object_two"></div>
            <div class="object" id="object_one"></div>
        </div>
    </div>
</div>

thank you

Simone
  • 2,304
  • 6
  • 30
  • 79

2 Answers2

1

Some possibilities to try :

  1. Add the class ng-cloak to your <div id="wrapper">
  2. Put your whole Page (except the preloader) in a ng-include ? All the dom from the div with id "wrapper".
  3. Otherwise you could use the route module of angular which will contains a template where all your content will be.
Walfrat
  • 5,363
  • 1
  • 16
  • 35
  • You make me think... perhaps I am doing everything wrong... perhaps I should have something like a SPA.., So, just one page, and the content change according to the route... I am doing the opposit.. I mean.. different pages with different directives/partial view to avoid the replication of code – Simone Feb 16 '16 at 15:36
  • 1
    Angularjs is designed to be SPA, so yes you're doing it wrong. And with routing and proper sepration of concern you don't have replication of code. But of course if you're starting with angularjs this may not be so easy at start. If you need a complex navigation : check angular-ui-router, you can defined state and views, nested states and nested views. – Walfrat Feb 16 '16 at 15:50
  • Thank you very much, I have solved in another way at the moment, but little by little I will modify the approach to develope in the correct way this small website i am doing – Simone Feb 17 '16 at 11:42
0

I have modified the div with id "wrapper" in order to be hidden (visibility: hidden) and in orderd to be shown when the preloader disapper. Surely not the correct way to approach, but solved my problem.

Simone
  • 2,304
  • 6
  • 30
  • 79