如何給GIF圖片加載，直到響應來自後端

HTML：如何給GIF圖片加載，直到響應來自後端

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

      });

需要，直到響應來自。我現在用裝載了後端加載dataloading圖像視頻上傳請求。由於視頻上傳時間更多。如果我使用數據加載，這將是很好的。現在我無法觸發數據加載部分。需要幫助

來源

2016-11-22 Nicoleta Wilskon

對於這個事情，我建議使用'角度繁忙'。

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

有了這個角模塊，您可以承諾添加到一個範圍對象。這個作用域對象綁定到cg-busy指令，然後在解析promise之前顯示加載gif。

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。

來源

2016-11-22 08:41:23 Mitta

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

來源

2016-11-22 09:31:15 trichetriche

如何給GIF圖片加載，直到響應來自後端

回答

相關問題