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

||||||
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.

||||||
  • 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. – Ragnarr May 22 '16 at 9:44
  • I've provided some code to show how the directive can be used in your case – PJDev May 22 '16 at 22:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.