Der Seitenladevorgang wird ausgeführt, bevor Daten über xhr in eckig zurückgegeben werden

Question

Wir stehen vor einer Herausforderung beim Laden von Dokument-URLs, die von S3 abgerufen wurden, und bei der Anzeige von Thumb-Bildern auf der Registerkarte Dashboard.

/***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; 
     } 

Nach den xhr.send() wird die Seite zu laden, geschieht ausgeführt, aber die Daten sind noch nicht bereit, und es gibt nicht definierte Dateiobjekt, da die Daten nicht in der Zwischenzeit zurückgeführt werden. Wie können wir die Belastung aufrechterhalten, bis die Daten zurückgegeben werden? Der Onload, glaube ich, hat einen Callback, der die Funktion ausführen soll. Korrigiere mich wenn falsch.
Wie kann das gehandhabt werden?
Die html um das Bild anzuzeigen ist

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

Answer 1

Die Zeit, die für die Seite ist von der Zeit unabhängig zu laden dauert es für Ihre xhr Anfrage in Anspruch nimmt.

So eine window.load Funktion erstellen, die eine andere Funktion aufruft, und setzen, was Sie nach dem xhr Anfrage innerhalb dieser anderen Funktion wie diese benötigen:

$(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 
} 
}