I'm having trouble getting my angular flexslider to display images smoothly. Currently, the images take a moment to load and it doesn't look great. I'd like them to fade in once everything is fully loaded. How can I achieve this? I've tried using ngAnimate and callbacks, as well as experimenting with directives, $timeout, and setting variables in my controller, but nothing seems to be working.
Below is what I have so 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 tried with $timeout and scope.$last, but without success. The variable showImages is set in my controller, but it's not waiting for the images to fully load before displaying them, which is causing issues.
Javascript:
//works but doesn't wait until images are fully loaded
$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, //no need for a new scope
restrict: 'A', //Attribute type
link: function (scope, elements, arguments){
console.log(scope.$last);
if (scope.$last) {
console.log('page Is Ready!');
}
}
}
})