Doopler Doopler - 1 year ago 385
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 }}')" />

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


Answer Source

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


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


<!-- image -->
<a href="#/information">
    <img ng-src='{{ (i.picture) || (loading) }}'/>
  • 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


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.

$ = function() {
        template: 'Loading...'
        console.log("The loading indicator is now displayed");
$scope.hide = function(){
        console.log("The loading indicator is now hidden");

// Assuming you have `$`, which it seems so
$ = {};
someDataCall().then(function(data) {
    // success
}).catch(error) { 
    // error

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

$$loaded().then(function(data) {
    // success
}).catch(function(error) {
    // error

For the last 2, make sure to have injected $ionicLoading





ion-spinner (I have never used it)