[英]Angular Flexslider hide until fully loaded
我一直在尝试让我的角度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!');
}
}
}
})
这是Fiddle的链接,显示了如何使它起作用:
https://jsfiddle.net/mpe51oso/
这个想法是添加一个指令,该指令在加载图像时调用一个函数。 该函数将增加一个计数器-一旦计数器等于滑块中的图像数量,它将设置一个标志,然后将其评估为true并显示您的滑块。
imageonload指令是这里的副本: AngularJS中ng-src的图像加载事件
因此,在您的HTML中添加imageonload属性指令并调用一个函数(此处为crementLoadCount)-还要注意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>
然后-增量LoadCount增量;)
$scope.incrementLoadCount = function () {
imgLoadedCount++;
if (sliderImgCount == imgLoadedCount) {
$scope.allLoaded = true;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.