如何添加一个微调器为每个图像加载在离子

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从来没有使用过）