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

加载图像的最佳方式

1 个答案: