如何提供 gif 图像以供加载，直到响应来自后端答案

【问题标题】：How to give gif image for loading until response comes from backend如何提供 gif 图像以供加载，直到响应来自后端
【发布时间】：2016-11-22 08:34:33
【问题描述】：

HTML：

   <div class="row" 
ng-if="dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" >

            <div class="file-upload-wrapper">
                <div class="file-upload">
                    <img class="file-image" ng-src="{{imageSource}}" ng-if="imageSource"/>
                    <input type="file" file-model="image" name="file" class="file"/>
                </div>
                <div class="file-upload-text"> Upload Picture</div>
            </div>
            <div class="file-restriction-info">
                Maximum 5 Images can be attached.<br/>
                File size below 10MB. File Format jpeg & png
            </div>
            <div class="file-tags">
                <ul>
                    <li ng-repeat="image in files | filter :'image'" >
                        <div class="file-tag-baloon">
                            <span>
                                <a ng-click="getImage(image.id);">{{image.filename}}</a>
                            </span>
                            <span><a ng-click="removeImage(image.id)">x</a></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

JS：

 $scope.dataLoading = false;

$scope.uploadVideo = function( file ){

            var json = {
                "request": {
                    "service":{
                        "servicetype":servicetype,
                        "functiontype": "1012",
                        "session_id": session_id
                    },     
                    "data":{     
                        "rolename":rolename
                    }
                }
            };

                                        console.log(JSON.stringify(json));

            FileService.uploadFile( json, file ).then(function(res){
                        $scope.dataLoading = true;

                                console.log(JSON.stringify(res));

                if( res && res.status.code == 0 ) {
                    $scope.getVideo( res.data.mediaids[0] );
                    $scope.getAll();

                } else FlashService.Error(res.status.message,  true);

            });

需要加载数据加载图像，直到响应来自后端。我正在使用加载视频上传请求。由于视频上传时间更多。如果我使用数据加载，那就太好了。现在我无法触发数据加载部分。需要帮助

【问题讨论】：

标签： angularjs ng-file-upload angular-file-upload

【解决方案1】：

<div class="row" ng-class="{visible: dataLoading, hidden: !dataLoading}" src="TOO LONG FOR ME TO COPY PASTE IT GOD DAMMIT">

在您的控制器中，不要更改任何内容（除非在完成加载后将 dataLoading 设置为 false）

在您的 CSS 文件中：

.visible {
    display: block;
}

.hidden {
    display: none;
}

【讨论】：

【解决方案2】：

为此，我建议使用“angular-busy”。

https://github.com/cgross/angular-busy

使用这个 Angular 模块，您可以将 Promise 添加到范围对象中。这个范围对象绑定到 cg-busy 指令，然后显示加载 gif，直到 promise 被解决。

controller.js

$scope.uploadPromise = FileService.uploadFile(json, file).then(.....

view.html

<div cg-busy="uploadPromise">Successfully uploaded!!</div>
<!-- It shows a loading icon until the promise 'uploadPromise' is resolved. Then this <div> will be shown -->

也可以添加自己的 gif 或 svg。

【讨论】：