显示加载覆盖，直到加载 $http get 图像

Question

我想在从我的 $http get 加载内容时显示加载动画（理想情况下显示加载量的百分比）。

我已经尝试过了，但它似乎并没有隐藏我想要隐藏的内容。

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

这是我在 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);
                    })

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