我一直试图让我的角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!');
}
}
}
})
答案 0 :(得分:3)
这是一个指向小提琴的链接,展示了如何使其发挥作用:
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;
}
}