Angular Flexslider hide until fully loaded

Question

I've been trying to get my angular flexslider to work the way I want it to. Right now it's being dynamically populated but the images take a second to load. It doesn't look very good. I would like it to fade in when everything is fully loaded. How can i do this? I can't get ngAnimate or a callback working. I've tried a directive as well. I've even tried $timeout and setting variables to true and false at the end of functions in my controller. Nothing has worked.

Here is my code thus far:

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>

Notes: hide-till-load was a directive I attempted with $timeout and scope.$last. Neither worked. showImages is a variable I set in my controller at the end of certain functions. However, it's not waiting until the images are fully loaded so it's not working how I want it to.

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

score 3 · Accepted Answer · edited May 23 '17 at 12:02

Here's a link to a Fiddle that shows how to make it work:

https://jsfiddle.net/mpe51oso/

The idea is to add a directive that calls a function whenever an image is loaded. That function increments a counter - and once the counter is equal to the number of images in your slider it sets a flag that is then evaluated to true and displays your slider.

The imageonload directive is a copy from here: Image loaded event in for ng-src in AngularJS

So in your HTML add the imageonload attribute directive and call a function (here incrementLoadCount) - also note the 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>

Then - incrementLoadCount increment ;)

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

Angular Flexslider hide until fully loaded

1 Answers1