Doopler Doopler - 5 months ago 181
AngularJS Question

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

<!-- end wrapper div -->
<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>

Answer

You can easily do this with the || operator inside of an ng-src tag:

Controller:

$scope.loading = "<some-pic.gif>";

View:

<!-- image -->
<a href="#/information">
    <img ng-src='{{ (i.picture) || (loading) }}'/>
</a>
  • Change the src tag to ng-src, it is more Angular friendly
  • Define a loading image/gif (previous uploaded) and store it in $scope variable
  • Use || operator, if first option is undefined then the second (the gif) will be displayed

Fiddle: 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.

$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):

$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

References:

ng-src

$ionicLoading

AngularFire

ion-spinner (I have never used it)