Javascript 加载图像的最佳方式

我正在创建一个移动应用程序，并意识到注销是在加载图像之前显示的。（加载一张图片需要一点时间）当我添加更多图片时，我可以看到这是一个问题

对于如何高效加载图像而不是瓶颈加载，有什么建议吗？或者，我如何实现一种加载屏幕显示方式，直到所有图像加载完毕

<!-- 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>

{{i.title}
免费

注销

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();
    }

}
);

“严格使用”；
angular.module（'App'）.controller（'homeController'，函数（$scope、$state、$Cordovoauth、$localStorage、$firebaseArray、$location、$http、$ionicPopup、$firebaseObject、Auth、FURL、Utils、$IonicStory）{
var ref=新的火基（FURL）；
$scope.product；
//获取对我们帖子的引用
var ref=新的火基（“https:///properties");
$scope.data=$firebaseArray（ref）；
$scope.disableClick=函数（n）{
setItem（'labelz'，n）；
}
$scope.logOut=函数（）{
Auth.logout（）；
$location.path（“/login”）；
}
$scope.goBack=函数（）{
$IonichStory.goBack（）；
}
}
);

我想您正在寻找NG斗篷指令。更多信息请点击此处

，您的严格模式指令中有一个输入错误。它必须是

“严格使用”

，而不是

“严格使用”

。谢谢。还有什么原因让我在这篇文章中被扣分吗？虽然你可以在Firebase中存储图像，但它对于图像存储来说并不理想。如果它们很小，比如说32x32像素，这没什么大不了的，但这不是Firebase推荐的做法。您最好利用另一家存储公司进行实际存储，并将这些图像的链接存储在Firebase中。我没有把它标记下来，但是如果你在Firebase和图像存储上搜索，你会看到有很多反对它的帖子。I.picture中有什么？I.picture只是图像的url