0

I'm building a slider with AngularJs using a directive but now I have a problem. This is the code of my home.html

<div class="loading" ng-hide="$root.showSlider">
   <div class="logo">
       <img class="" ng-src="./img/logo.png">
   </div>
</div>

<slider-directive images="images" ng-show="$root.showSlider" ng-if="images"/>

Now I show the snippet the controller:

.controller("HomeController",["$scope","$rootScope", function($scope, $rootScope) {

            (function getData() {
                    //do async call that return data
                    $scope.images = data;
                }, function(err) {
                    console.log(err);
                });
            })();
        }
    ]);

And Now I can show the code of my directive:

.directive('sliderDirective', function($rootScope, $interval) {
            return {
                restrict: 'E',
                templateUrl: 'html/.../slider.html',
                replace: true,
                scope: {
                    images: '='
                },
                link: function(scope, element, attrs) {

                    scope.currentIndex = 0;

                    scope.next = function() {
                        scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0;
                    };

                    scope.prev = function() {
                        scope.currentIndex > 0 ? scope.currentIndex-- : scope.currentIndex = scope.images.length - 1;
                    };

                    scope.$watch('currentIndex', function() {
                        scope.images.forEach(function(image) {
                            image.visible = false; // make every image invisible
                        });

                        scope.images[scope.currentIndex].visible = true; // make the current image visible


                        $rootScope.showSlider = true;
                    });

                    $interval(function() {
                        scope.next();
                    }, 10000);
                }
            };
        });

Now my problem is understand when the images in background, that are in slider, are loaded so I can remove the loading and show the slider without bad effect. Is there a method that tell me when all images or the first image are loaded? thanks

Alessandro
  • 905
  • 3
  • 17
  • 32

1 Answers1

0

You can simply attach 'load' event handler for the first image (or for all images - it depends from you). Have a look at this question:

AngularJS - Image "onload" event

SamBarnes created a simple and nice directive, which lets you easily attach load event handler and connect it with function in angular controller.

Edit

I present a sample solution with imageLoaded directive.

1. image-loaded directive

angular.module('your_module')
    .directive('imageLoaded', ['$parse', ImageLoadedDirective]);

function ImageLoadedDirective($parse) {
    return {
        restrict: 'A',
        scope: {
            imageLoaded: '&'
        },
        link: function (scope, elem, attrs) {
            elem.on('load', function (event) {
                scope.$apply(function () {
                    if (angular.isFunction(scope.imageLoaded)) {
                        scope.imageLoaded();
                    }
                });
            });
        }
    };
}

2. slider template (a simple ng-repeat with images)

... 

<div ng-repeat="image in images">
    <img ng-src="{{ image.src }}" image-loaded="imageLoadHandler()" />
</div>

...

3. slider directive

...

link: function(scope, element, attrs) {

    // Number of currently loaded images
    scope.loadedImagesCount = 0;

    // Function executed when image is loaded
    scope.imageLoadHandler = function() {

        // Increase counter
        scope.loadedImagesCount++;

        // Check if number of loaded images equals slider's images count
        if(scope.loadedImagesCount == scope.images.length) {

            // Do something, when all images are loaded
            alert('all loaded');
        }
    }

...

Explanation

I attached image-loaded directive to img element inside ng-repeat and used it to notify slider's controller when each of the images is loaded. In slider directive's scope I added a counter and a simple handler, which increments the counter and checks if all images have been loaded.

Community
  • 1
  • 1
PJDev
  • 951
  • 5
  • 20
  • ok, I like the last respose of the link but how can I get the elements of img in the directive for attach the 'load' event? The images in directive are in un ng-repeat. – Alessandro May 22 '16 at 09:44
  • I've provided some code to show how the directive can be used in your case – PJDev May 22 '16 at 22:10