如何为 Ionic 中的每个图像加载添加一个微调器

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，它对 Angular 更友好
• 定义加载图像/gif（之前上传的）并将其存储在$scope变量中
• 使用||运算符，如果第一个选项是undefined，则将显示第二个选项（gif）

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

另外，您可以使用$ionicLoading控制器内部显示加载警报，直到所有图像都加载完毕，我在这里回答了有关如何执行此操作的另一个问题。

$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检测图像何时加载（包含在AngularFireAPI 中）：

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

对于最后 2 个，请确保已注入$ionicLoading

参考：

ng-src

$ionicLoading

角火

ion-spinner（我从未使用过）