页面加载发生在通过 xhr 以角度返回的数据之前

Question

我们在加载从 S3 获取的文档 url 并在仪表板标签页上显示缩略图时面临挑战。

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

xhr.send() 执行后，页面加载发生，但数据还没有准备好，它给出了未定义的文件对象，因为同时没有返回数据。在返回数据之前，我们如何才能拖拉负载？我认为 onload 有一个回调应该执行该功能。如果错误，请纠正我。
怎么处理？
显示图像的 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
}
}