How to add a spinner for each image loading in Ionic

Question

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>

Answer 1

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)