1

I want to show a loading animation (ideally that shows % of how much is loaded) whilst content loads from my $http get.

I have made an attempt, but it does not seem to hide the content I am trying to hide.

I set a time length- but I do not want it to show the loading overlay for a set time. I want it to show the loading overlay (possibly until a minimum of 3 images are loaded?) until the element is loaded.

Here is my attempt in a plunker: http://plnkr.co/edit/7ScnGyy2eAmGwcJ7XZ2Z?p=preview

 .factory('cardsApi', ['$http', '$ionicLoading', '$timeout', function ($http, $ionicLoading, $timeout) {
        var apiUrl = 'http://mypage.com/1/';

        $ionicLoading.show({
            duration: 3000,
            noBackdrop: true,
            template: '<p class="item-icon-left">Loading stuff...<ion-spinner icon="lines"/></p>'
        });


        var getApiData = function () {
            return $http.get(apiUrl).then($ionicLoading.hide, $ionicLoading.hide);
        };

        return {
            getApiData: getApiData,
        };
    }])

    .controller('CardsCtrl', ['$scope', 'TDCardDelegate', 'cardsApi', '$http',
        function ($scope, TDCardDelegate, cardsApi, $http) {

            $scope.cards = [];

                cardsApi.getApiData()
                    .then(function (result) {
                        console.log(result.data) //Shows log of API incoming
                        $scope.cards = result.data;
                        $scope.product_id = result.data.product_id;
                    })
                    .catch(function (err) {
                        //$log.error(err);
                    })
||||||
1

Remove the duration line from your $ionicLoading.show declaration.

duration: 3000,

So that it looks like:

$ionicLoading.show({
    noBackdrop: true,
    template: '<p class="item-icon-left">Loading stuff...<ion-spinner icon="lines"/></p>'
});

And that should work (at least it does in the plunker). The duration property specifies when to close the ionicLoading instance and does not wait for ionicLoading.hide().

||||||
  • This does not work. The image load after the loading symbol – Yian Jan 9 '16 at 16:44
0

You want to wait until the image is actually loaded and rendered, but you are hiding the loading messages as soon as the API call returns. From your code it looks as though the API returns the image URL, not the image data itself?

In which case you could do it using the element.onload(), however the problem with this is that it's no longer a generic API which works for loading anything but I'll let you decide whether that's OK for your use case.

var imagesLoaded = 0;    

var loadImage = function(result) {
  var image = new Image();
  image.onload = function () {
    imagesLoaded++;

    if (imagesLoaded >= 3)
      $ionicLoading.hide();
  };

  // We still want to hide the loading message if the image fails to load - 404, 401 or network timeout etc
  image.onerror = function () {
    imagesLoaded++; 

    if (imagesLoaded >= 3)
      $ionicLoading.hide();
  };
  image.src = result.image_url;
};

// We still want to hide the loading message if the API call fails - 404, 401 or network timeout etc
var handleError = function() {
  imagesLoaded++;

  if (imagesLoaded >= 3)
    $ionicLoading.hide();
};

var getApiData = function () {
  return $http.get(apiUrl).then(loadImage, handleError);
};
||||||
  • I cannnot use .then function. So I changed the line to $http.get(apiUrl)["finally"](loadImage, handleError); . The page stays blank. Can you please advise? – Yian Jan 9 '16 at 16:35
  • You could try the older $http.get(url).success(loadImage).error(handleError). – Stuart M Jan 10 '16 at 17:54
  • Nope- still not working with that example. It shows the loading modal then doesnt load the http.get. I've created it in this plunker to be fixed- plnkr.co/edit/7ScnGyy2eAmGwcJ7XZ2Z?p=preview – Yian Jan 12 '16 at 23:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.