Angular Flexslider 隐藏直到完全加载答案

【问题标题】：Angular Flexslider hide until fully loadedAngular Flexslider 隐藏直到完全加载
【发布时间】：2015-11-19 19:05:34
【问题描述】：

我一直在努力让我的角度 flexslider 按我想要的方式工作。现在它正在动态填充，但图像需要一秒钟才能加载。它看起来不太好。我希望它在一切都满载时淡入。我怎样才能做到这一点？我无法获得ngAnimate 或回调工作。我也尝试过一个指令。我什至尝试过$timeout 并在控制器中的函数末尾将变量设置为 true 和 false。没有任何效果。

到目前为止，这是我的代码：

HTML：

<flex-slider hide-till-load ng-show="showImages" class="animate-if" slider-id="slider" flex-slide="image in imagePaths track by $index" animation="fade" animation-loop="false" sync="#carousel" slideshow="false" control-nav="false" prev-text="" next-text="" init-delay="100" start="loaded()">
  <li>
    <img ng-src="{{image.custom}}" alt="Luxury Resort Rental Image"/>
  </li>
</flex-slider>

注意：hide-till-load 是我尝试使用 $timeout 和 scope.$last 的指令。都没有奏效。 showImages 是我在某些函数结束时在控制器中设置的变量。但是，它不会等到图像完全加载，所以它不能按我想要的方式工作。

Javascript：

//works but does not wait until images are fully loaded. Not what I want
$scope.loaded= function(){
    console.log("this is after");
    $timeout(function() {
        $scope.showImages= true;
        $scope.iconHide= true; 
    });   
 }

//doesn't work at all
resortModule.directive('hideTillLoad', function (){

   return{
     scope:false, //don't need a new scope
     restrict: 'A', //Attribute type
     link: function (scope, elements, arguments){ 
        console.log(scope.$last);
        if (scope.$last) {
            console.log('page Is Ready!');
        }
     }   
   }
})

【问题讨论】：

标签： javascript angularjs flexslider

【解决方案1】：

这是一个指向 Fiddle 的链接，展示了如何使其工作：

https://jsfiddle.net/mpe51oso/

这个想法是添加一个指令，该指令在加载图像时调用函数。该函数会增加一个计数器 - 一旦计数器等于滑块中的图像数量，它就会设置一个标志，然后将其评估为 true 并显示您的滑块。

imageonload 指令是从这里复制的：Image loaded event in for ng-src in AngularJS

所以在你的 HTML 中添加 imageonload 属性指令并调用一个函数（这里是 incrementLoadCount）——还要注意 ng-show

<flex-slider slide="item in items track by item.id" animation="slide" ng-show="allLoaded">
        <li><img ng-src="{{item.img}}" imageonload="incrementLoadCount()" />{{item.name}}</li>
</flex-slider>

然后 - incrementLoadCount 增量 ;)

$scope.incrementLoadCount = function () {
        imgLoadedCount++;
        if (sliderImgCount == imgLoadedCount) {
            $scope.allLoaded = true;
        }
    }

【讨论】：