How to capture the status rendering (pending) for svg not loaded on the screen?

Asked

Viewed 34 times

0

I have an avatar that mounts with SVG files, the problem is that it gets disassembled before status 200. How could I capture the status (pending) for only after it load show the avatar?

Example of where avatar hair is rendered in the HTML view:

 <!-- cabelo -->
<div class="hair" ng-if="avatarUser.hair != null" ng-class="avatarUser.hair.model">
   <div class="hair-color">
      <div ng-bind-html="resultSVG.hair"></div>
  </div>
</div>

The service that converts the URL to avatar HTML content:

this.convertAvatar = function(url_svg, $scope, type) {

    var request = $http({
         method: "get",
         url: url_svg
    });
    var svg = request.then( _handleSuccess, _handleFail );
        svg.then(function(result){
            $scope.resultSVG[type] = $sce.trustAsHtml(result);
        });

 };

function _handleFail(response) {
    verifyFail(response);
    loadingOff('');
}

function _handleSuccess(response) {

    if($http.pendingRequests.length === 0){
        loadingOff('');
    }
     return response.data;
}

What is to read from the avatar... would these pending...

inserir a descrição da imagem aqui

2 answers

0

You can filter the sample images Let all display: None

var lengthUnloadImg = Array.from(document.getElementsByTagName("img")).filter(function(a){ return a.complete != true }).length

  while(lengthUnloadImg > 0){
    setTimeOut(function(){
      lengthUnloadImg = Array.from(document.getElementsByTagName("img")).filter(function(a){ return a.complete != true }).length
    }, 1000);
  }

0


I solved the problem by putting a check variable of the read total:

 this.convertAvatar = function(url_svg, $scope, type) {

     var request = $http({
                      method: "get",
                      url: url_svg
                   });
     var svg = request.then(_handleSuccess, _handleFail);
         svg.then(function (result) {
                    $scope.total_svg_ready++;
                    $scope.resultSVG[type] = $sce.trustAsHtml(result);
                    if ($scope.total_itens_avatar == $scope.total_svg_ready) {
                         $scope.IsLoadingSvg = false;
                    }
                });
};

Browser other questions tagged

You are not signed in. Login or sign up in order to post.