CODEWITHSUNDEEP
javascriptjqueryangularjsionic-framework
Yian
Yian

Reputation: 199

Show loading overlay until $http get images are loaded

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);
                    })

Upvotes: 1

Views: 1586

Answers (2)

sbbeebe
sbbeebe

Reputation: 11

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().

Upvotes: 1

Stuart M
Stuart M

Reputation: 93

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);
};

Upvotes: 0

Related Questions