Angularjs: event preload background image

Question

Я строю слайдер с AngularJs, используя директиву, но теперь у меня есть проблема. Это код моего 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"/> 

Теперь я показать фрагмент кода контроллера:

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

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

И теперь я могу показать код моей директивы:

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

сейчас моя проблема заключается в том, что загружаются изображения в фоновом режиме, которые находятся в слайдере, поэтому я могу удалить загрузку и показать слайдер без плохих результатов. Есть ли способ, который скажет мне, когда загружаются все изображения или первое изображение? спасибо

Answer 1

Вы можете просто прикрепить обработчик события load для первого изображения (или для всех изображений - это зависит от вас). Посмотрите на этот вопрос:

AngularJS - Image "onload" event

SamBarnes создал простую и хорошую директиву, которая позволяет легко прикрепить обработчик событий нагрузки и соединить его с функцией в угловом контроллера.

Редактировать

Представляю раствор образца с директивой imageLoaded.

1. Изображение нагруженных директива

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. Шаблон ползун (простой нг-повтор с изображениями)

... 

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

... 

3. Директива ползун

... 

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

... 

Объяснение

Я приложил изображение нагруженной директивы IMG элемента внутри нг-повтор и использовать его, чтобы уведомить контроллер слайдера, когда каждый из изображений загружаются. В области действия ползунка я добавил счетчик и простой обработчик, который увеличивает счетчик и проверяет, загружены ли все изображения.