[英]How to add a spinner for each image loading in Ionic
I am trying to load a list of images with spinner shown as each image is loaded. 我正在尝试加载每个图像加载时显示微调器的图像列表。
This is what I have but don't see how to add a spinner as each image is loaded instead of seeing a blank screen as they load 这是我所拥有的,但没有看到如何在加载每个图像时添加微调器,而不是在加载时看到空白屏幕
<div ng-repeat="i in data| filter: { tags: tag } " class='wrapper' id="homeImg">
<!-- wrapper div -->
<!-- image -->
<a href="#/information"> <img class="ng-cloak" style="float:left; display:inline-block; overflow:hidden; border: 1px;" class="fill_image" src='{{ i.picture }}' style width="100%" style height="100%" ng-click="disableClick('{{ i.firebase_url }}')" /> </a>
<!-- description div -->
<div class='description'>
<!-- description content -->
<p class='description' style="float: left">
{{i.title }}
</p>
<p class='description' style="float: right">
{{i.location}}
</p>
<!-- end description content -->
</div>
<!-- end description div -->
</div>
You can easily do this with the ||
您可以使用
||
轻松完成此操作 operator inside of an ng-src
tag: ng-src
标记内的运算符:
Controller: 控制器:
$scope.loading = "<some-pic.gif>";
View: 视图:
<!-- image -->
<a href="#/information">
<img ng-src='{{ (i.picture) || (loading) }}'/>
</a>
src
tag to ng-src
, it is more Angular friendly src
标签更改为ng-src
,它更加Angular友好 $scope
variable $scope
变量中 ||
||
operator, if first option is undefined
then the second (the gif) will be displayed undefined
则显示第二个选项(gif) Fiddle: http://jsfiddle.net/xf3ezakc/ 小提琴: http : //jsfiddle.net/xf3ezakc/
Also, you could use an $ionicLoading
inside the controller to display a loading alert until all the images have loaded, I answered another question on how to do that here . 此外,您可以在控制器内部使用
$ionicLoading
来显示加载警报,直到所有图像都已加载为止,我在这里回答了另一个关于如何执行此操作的问题 。
$scope.show = function() {
$ionicLoading.show({
template: 'Loading...'
}).then(function(){
console.log("The loading indicator is now displayed");
});
};
$scope.hide = function(){
$ionicLoading.hide().then(function(){
console.log("The loading indicator is now hidden");
});
};
// Assuming you have `$scope.data`, which it seems so
$scope.data = {};
$scope.show();
someDataCall().then(function(data) {
// success
$scope.hide();
}).catch(error) {
// error
$scope.hide();
});
I see that you also have a firebase
reference in your code and if you are using $firebaseArray
or $firebaseObject
you could use $ionicLoading
in combination with $loaded
to detect the when the images have loaded (included in AngularFire
API): 我看,你也有一个
firebase
参考在你的代码,如果你正在使用$firebaseArray
或$firebaseObject
你可以使用$ionicLoading
结合$loaded
检测到的图像时,已加载(包括在AngularFire
API):
$scope.data.$loaded().then(function(data) {
// success
$scope.hide();
}).catch(function(error) {
// error
$scope.hide()
});
For the last 2, make sure to have injected $ionicLoading
对于最后2个,请确保已注入
$ionicLoading
References: 参考文献:
ion-spinner (I have never used it) 离子旋转器 (我从未使用过它)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.