Question

我希望显示一个加载动画（理想情况下显示加载了多少的动画），同时从我的$ http获取内容加载。

我已尝试过，但它似乎并没有隐藏我试图隐藏的内容。

我设置了一个时间长度 - 但我不希望它在一段时间内显示加载覆盖。我希望它显示加载覆盖（可能直到加载至少3个图像？），直到元素被加载。

以下是我对一名傻瓜的尝试： 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);
                    })

Answer 1

从$ ionicLoading.show声明中删除持续时间行。

duration: 3000,

看起来像：

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

这应该有用（至少它在plunker中）。 duration属性指定何时关闭ionicLoading实例并且不等待ionicLoading.hide（）。

Answer 2

您希望等到实际加载和呈现图像，但是一旦API调用返回，您就会隐藏加载消息。从您的代码看，它看起来好像API返回图像URL，而不是图像数据本身？

在这种情况下你可以使用element.onload（）来做到这一点，但是问题在于它不再是一个通用API，它可以用于加载任何东西，但我会让你决定你的用例是否正常

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

显示加载叠加层，直到加载$ http get图像

2 个答案: