xhr経由で返されるデータの前にページがロードされる

Question

S3からフェッチされたドキュメントURLを読み込んでダッシュボードタブページにサムイメージを表示する際に問題が発生しています。 xhr.send()後

/***fetch docs **push success confirm***/ 
    $scope.getdocuments = function(){ 
     DDListDataService.getDocumentTypes().then(function(docs){ 
      $scope.docTypes = docs.data; 
     }); 

     userService.fetchUserDocs($scope.user.customerId,$scope.user.entityType).then(function(userDocs){ 

      //console.log("result--"+userDocs); 

      angular.forEach(userDocs, function(object , key){ 
       console.log(object); 
       var xhr = new XMLHttpRequest(); 
       var blob; 
       xhr.open('GET', object.documents[0].documentUrl); 
       //var file = common.base64ToBlob(object.d, true); 
       xhr.responseType = 'arraybuffer'; 

       xhr.onload = function(e) { 

        //var file = remoteToBlob(object.documents[0].documentUrl); 
        //var file = common.base64ToBlob(object.documents[0].document, 'image/jpg'); 
        /*file.lastModifiedDate = new Date(); 
        file.name = "";*/ 

        var file = new Blob([this.response], {type: 'image/jpg'}); 
        //rest of the code that uses the blob goes here 

        file.lastModifiedDate = new Date(); 
        file.name = ""; 

        //setTimeout(function(){console.log(file)},1000); 

        var options = { 
          customerId : $scope.user.customerId, 
          customerType : $scope.user.entityType, 
          docTypeName : object.key.documentName, 
          documentName : object.key.documentNameId, 
          documentVersion : object.key.documentVersion, 
          documentUID : object.doccumentUID, 
          //requestedBy : $scope.user.customerType, 
          requestedBy : LocalService.get('userType'), 
          requestedById : $scope.user.customerId 

        } 

        var fileItem = new FileUploader.FileItem($scope.uploader,file,options); 
        fileItem.progress = 100; 
        fileItem.isUploaded = true; 
        fileItem.isSuccess = true; 

        /*file.customerId = $scope.user.customerId; 
        file.customerType =$scope.user.entityType; 
        file.documentName = object.key.documentNameId; 
        file.documentVersion =object.key.documentVersion; 
        file.documentUID = object.doccumentUID; 
        file.requestedBy = $scope.user.customerId; 
        file.requestedById = $scope.user.customerId;*/ 

        $scope.uploader.queue.push(fileItem); 
        console.log(fileItem); 
       }; 
       xhr.send(); 
      }); 
     }); 
     //$scope.uploader.formData=[{"user":angular.json($scope.user)}]; 
     $scope.uploader.queue.length = 0; 
     } 

は、ページのロードが発生した実行されますが、データはまだ準備ができていない、それはデータが平均時間で返されていないとして、未定義のファイルオブジェクトを提供します。データが返されるまでどのように負荷を減らすことができますか？私が信じているオンロードは関数を実行すべきコールバックを持っています。間違っていれば私を訂正してください。
これはどのように処理できますか？画像を表示する
htmlが

<div ng-show="uploader.isHTML5" ng-thumb="{ file: item._file, height: 100 ,stream:item._file}"></div> 

Answer 1

それが完了するためにあなたのXHRリクエストにかかる時間とは独立してロードするページのにかかる時間です。だから、

、別の関数を呼び出すwindow.load関数を作成し、あなたがこのような他の関数内のXHRリクエストの後に必要なものを置く：

$(window.load(function(){ 
afterXHRLoad(); //This calls the afterXHRLoad function after the page loads 
}); 

function afterXHRLoad(){ 
if($.active == 0) 
{ 
//code needed here; 
} 
else 
{ 
setTimeout(afterXHRLoad, 1000); //recursively call the function after 1 second 
} 
}