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

Question

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

Navigation

#1 by (0 votes)
#2 by (0 votes)

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) only after it loads displaying the avatar?

Example where the 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 the avatar's 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 be these pending ...

javascript angularjs svg

asked by anonymous 22.01.2018 / 20:26

2 answers

0

You can make a filter in the sample images leave 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);
  }

22.01.2018 / 21:01

Save data clicked on a JSON Error in wordpress

score 0 · Accepted Answer

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

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