如何添加一個微調器爲每個圖像加載在離子

Question

我想加載一個圖像列表顯示與每個圖像加載顯示的微調。

這是我有，但沒有看到如何添加一個微調爲每個圖像，而不是裝載看到黑屏，因爲他們加載

<div ng-repeat="i in data| filter: { tags: tag } " class='wrapper' id="homeImg"> 
    <!-- wrapper div --> 

    <!-- image --> 
    <a href="#/information"> <img class="ng-cloak" style="float:left; display:inline-block; overflow:hidden; border: 1px;" class="fill_image" src='{{ i.picture }}' style width="100%" style height="100%" ng-click="disableClick('{{ i.firebase_url }}')" /> </a> 
    <!-- description div --> 
    <div class='description'> 
     <!-- description content --> 
     <p class='description' style="float: left"> 
      {{i.title }} 
     </p> 
     <p class='description' style="float: right"> 
      {{i.location}} 
     </p> 

     <!-- end description content --> 
    </div> 
    <!-- end description div --> 
</div> 

Answer 1

您可以輕鬆地與||運營商做到這一點內部的ng-src標籤：

控制器：

$scope.loading = "<some-pic.gif>"; 

查看：

<!-- image --> 
<a href="#/information"> 
    <img ng-src='{{ (i.picture) || (loading) }}'/> 
</a> 

• 更改src標籤ng-src，它是多棱角友好
• 定義加載圖像/ GIF（上載），並將其存儲在$scope可變
• 使用||運營商，如果第一個選項是undefined則第二（的GIF）將顯示

小提琴：http://jsfiddle.net/xf3ezakc/

---

此外，您還可以使用一個$ionicLoading控制器內顯示加載警報直到所有圖像加載了，我回答瞭如何做到這一點here另一個問題。

$scope.show = function() { 
    $ionicLoading.show({ 
     template: 'Loading...' 
    }).then(function(){ 
     console.log("The loading indicator is now displayed"); 
    }); 
}; 
$scope.hide = function(){ 
    $ionicLoading.hide().then(function(){ 
     console.log("The loading indicator is now hidden"); 
    }); 
}; 

// Assuming you have `$scope.data`, which it seems so 
$scope.data = {}; 
$scope.show(); 
someDataCall().then(function(data) { 
    // success 
    $scope.hide(); 
}).catch(error) { 
    // error 
    $scope.hide(); 
}); 

---

我看你也有firebase參考你的代碼，如果你正在使用$firebaseArray或$firebaseObject你可以結合使用$ionicLoading與$loaded檢測到的圖像時，已加載（包括在AngularFire API）：

$scope.data.$loaded().then(function(data) { 
    // success 
    $scope.hide(); 
}).catch(function(error) { 
    // error 
    $scope.hide() 
}); 

在過去的2，確保注入了$ionicLoading

個

參考文獻：

ng-src

$ionicLoading

AngularFire

ion-spinner（I從來沒有使用過）