加載圖像的最佳方式

Question

我正在創建一個移動應用程序並意識到在加載圖像之前顯示注銷。 （加載一張圖像需要一些時間）當我添加更多圖像時，我可以看到這是一個問題。

是否有任何關於如何有效加載圖像而不是瓶頸的建議？ 或者我怎樣才能實現一種加載屏幕顯示的方法，直到所有圖像都加載完畢

<!-- end wrapper div -->
        <div ng-repeat="i in data" class='wrapper'>
            <!-- wrapper div -->
            <!-- add address of information here!!!! -->


            <!-- image -->
            <a href="#/nextPage">
                <img 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='name' style="float: left">{{ i.title }}</p>
                <p class='name' style="float: right">Free</p>


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

        </div>

        <button ng-click="logOut()" class="button button-clear button-positive">Logout</button>

Javascript文件：

'Use Strict';
angular.module('App').controller('homeController', function ($scope, $state, $cordovaOauth, $localStorage, $firebaseArray, $location, $http, $ionicPopup, $firebaseObject, Auth, FURL, Utils, $ionicHistory) {
    var ref = new Firebase(FURL);
    $scope.product;

    // Get a reference to our posts
    var ref = new Firebase("https://<database>/properties");

    $scope.data = $firebaseArray(ref);


    $scope.disableClick = function (n) {
        localStorage.setItem('labelz', n);

    }


    $scope.logOut = function () {
        Auth.logout();
        $location.path("/login");
    }

        $scope.goBack = function () {
        $ionicHistory.goBack();
    }

}
);

Answer 1

我認為您正在尋找 ngCloak 指令。 更多信息在這里https://docs.angularjs.org/api/ng/directive/ngCloak