AngularJS delay view load

Question

Is there a way to delay the ui-view till the DOM loads. At the minute i'll click a page and the images are only half loaded. Is there a good way to only display the new page load once all the elements have been loaded completely?

I have tried using ng-cloakbut I don't think it does what I need.

Answer 1

If you are using angular routing you ca use resolve for that. You can read more about it in angular routing documentation.

Resolve accept promises and won't let view be shown untill those promises are resolved.

upd:

(function () {
    "use strict";
    angular.module('navigation', ['myControllers', 'ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider
            .when('/MyPage/',
            {
                controller: 'myController',
                controllerAs: 'myCtrl',
                templateUrl: '/AngularApp/Modules/MyPage/Views/index.html',
                // here we create a promise and it will be resolved in 2 seconds and then page will be loaded.
                resolve: { tmp: function ($timeout) { return $timeout(function () { }, 2000); } } 
            })
            .otherwise({
                redirectTo: '/'
            });
    });
})();

Here we describe our routing and create empty promise to mock data loading process. But in real world you'll want to put a $http call there (it will get your data from server). Fortunately $http returns promise.

Answer 2

Another option would be to hide your images until they are loaded. You can do this by using a directive as an attribute (similar to how ng-cloak works but with added functionality). Your directive would look something like this, first hiding the element when angular compiles, and then showing it when the document is ready / images have loaded, etc.

angular.module('app').directive('fadeUpWhenReady', ['$document', function ($document) {
  return { 
    restrict: 'A',
    compile: function (element, attr) {
      element.css({
        "opacity": 0,
        "-webkit-transform":  "translateY(100px)",
        "-moz-transform":     "translateY(100px)",
        "-o-transform":       "translateY(100px)",
        "-ms-transform":      "translateY(100px)",
        "transform":          "translateY(100px)",
        "-webkit-transition": "all 0.5s cubic-bezier(0.345, 0, 0.25, 1)",
        "-moz-transition":    "all 0.5s cubic-bezier(0.345, 0, 0.25, 1)",
        "-o-transition":      "all 0.5s cubic-bezier(0.345, 0, 0.25, 1)",
        "-ms-transition":     "all 0.5s cubic-bezier(0.345, 0, 0.25, 1)",
        "transition":         "all 0.5s cubic-bezier(0.345, 0, 0.25, 1)"
      });

      $document.ready( function() {
        element.css({
          "opacity": 1,
          "-webkit-transform":  "translateY(0)",
          "-moz-transform":     "translateY(0)",
          "-o-transform":       "translateY(0)",
          "-ms-transform":      "translateY(0)",
          "transform":          "translateY(0)"
        });
      });
    }
  };
}]);

Finally, you just use it as an attribute in an element you'd like to hide, for example:

<img ng-src = "{{ img.url }}" fade-up-when-ready />

Note that if your element is inside an ui-view, it'll compile twice. Once when the page initially loads, and a second time when the ui-view comes in the screen.