Показать загрузку наложения до загрузки $ http get images

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

Вы хотите ждать, пока изображение не будет на самом деле загружаются и отображаются, но вы скрываете сообщения загрузки, как только возвращается 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); 
}; 

Answer 2

Удалить строку продолжительности из декларации $ 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().