Question

我是一个图片库网站，我在控制器中以json格式从数据库中获取所有图像和图像相关数据，然后使用ng-repeat我将它们与HTML。现在，数据被提前加载，但图像加载较晚，因此图像分散。怎么解决这个问题。我不想使用setTimeOut。

示例代码如下： -

<!DOCTYPE html>
<html lang="en" class="no-js" ng-app="cps">
<body ng-controller="CPSController">
<div>
<li ng-repeat="image in images" class="shown">
                <a id="{{image.imageid}}" ng-click="openimage(image.imageid)">
                    <img idx="id-thumb-{{$index}}" ng-src="/imagedisplay/{{image.imageid}}" alt="" style="">
                    <div class="meta_info">
                        <h3>{{image.imagename}}.</h3>
                        <div class="callto">
                            <div class="actions">
                                <span><img src="img/artist.svg" alt="">{{image.ownername}}</span>
                                <span><img src="img/likes.svg" alt="">{{image.likes}}</span>
                                <span><img src="img/views_small.svg" alt="">{{image.views}}</span>
                            </div>
                            <div class="category">
                                Art Category
                            </div>
                        </div>
                    </div>
                </a>
            </li>

</div>
</body>
</html>

<script>

    var cps = angular.module('cps', []);
    cps.controller('CPSController', function($scope, $http, $compile){
        $scope.products = [];
        $http.get("/alldata/").success(function(data){
             if(data != "null")
             {
               for(i=data.length-1; i>=0; i--){
                 $scope.products.push(data[i]);
                }
                $scope.sendOrder('views', 'likes', 'timestamp', 2);
              }else{
                //$('#noImages').show();
              }

           /*setTimeout(function(){
                $("[idx^='id-thumb']").show();
            });*/
        });
     });
</script>

Answer 1

`# UPDATE [August 2017]`

与以下相同的答案，除了我们可以使用load上的window事件而不是DOMContentLoaded上的document。这将确保window中的所有资源（例如图片）都已加载。

window.addEventListener("load", function(event) {
    ...
})

我们不必强迫Angular vanilla javascript就足够了。这就是我的AngularJS项目

的工作方式

将此添加到body标记中。 HTML Content Loads

后，它将使用脚本标记删除

<div id="page-loading">
    <img style="display:block; margin:0 auto;" src="styles/img/page-loading.gif">
</div>

图片下方的

script标记。

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(event) {
        /*VANILLA JAVASCRIPT*/
        var element = document.getElementById("page-loading");
        element.parentNode.removeChild(element);
        /* OR WITH jQuery*/
        $('#page-loading')
            .fadeOut('slow');
    });
</script>

DOMContentLoaded 事件将确保在加载了所有callback后执行images,fonts,js and other assets。

祝你好运。

Answer 2

我不确定这是否是正确的方法，但我通常做的是我有一个$scope.loaded变量，它具有页面状态。如果页面已加载，则显示要显示的div ...如果正在加载，则显示带有加载程序的div。看看这个plunk来了解我想说的话。

我也在这里粘贴了Plunkr代码。

<强>的Javascript

  var app = angular.module('plunker', []);

  app.controller('MainCtrl', function($scope, $timeout) {
    $scope.loaded = true;
    $scope.text = 'Nothing loaded yet.';

    $scope.loadSomething = function () {
      $scope.loaded = false;

      $timeout(function() {
        // Simulates loading
        $scope.text = 'Hello World';
        $scope.loaded = true;
      }, 2000);
    };
  });

<强> HTML

<body ng-controller="MainCtrl">
<button class="btn btn-primary" ng-click="loadSomething()">Load Something</button>
<br/>
<div ng-hide="loaded">
  Loading...
</div>
<div ng-show="loaded">
  <p>{{ text }}</p>
</div>

如果您需要任何进一步的帮助，请告诉我。

Answer 3

试试这个：

if len(list1) < 5:
    list2.extend(list1)
    # at this point, I want to add the empty strings, completing the list of size 5

Answer 4

虽然@chotesah的回答是正确的，但我可以建议你采用另一种方式，并为每个图像使用预加载器（类似Facebook的页面加载）。

试试这个module。你需要改变几行：

// Add module dependency   
angular.module('app', ['angular-preload-image']);
…
<img preload-image idx="id-thumb-{{$index}}" ng-src="/imagedisplay/{{image.imageid}}" default-image="[URL]" fallback-image="[URL]" />

之后在codrops寻找漂亮的图像预加载器。

Answer 5

我一直在努力解决同样的问题。以下是在我这边工作的地方，我根据承诺为每个不同的部分显示多个加载图像。为此，我创建了一个指令。

我的HTML看起来像下面的内容。

<mi-loading promise="Loading"></mi-loading>

Angularjs指令。

(function () {

    var module = angular.module('mi-loading', []);

    module.directive('miLoading', function () {
        return {
            restrict: 'E',
            scope: {
                promise: '='
            },

            link: function ($scope, $element, $attrs) {

                $scope.IsLoading = true;

                $scope.$watch('promise', function (prom) {
                    if (!prom) {
                        $scope.IsLoading = false;
                        return;
                    }
                    prom.success(function () { $scope.IsLoading = false; });
                });
            },
            template: '<div ng-show="IsLoading" class="spinner" style="height:300px"></div>'
        };
    });

})();

最后用法，

 var getData = function ()
           {
               var Promise = myservice.getMyData($scope);

               $scope.Loading = Promise;
           };

CSS

.spinner {
    min-width: 30px;
    min-height: 30px;
}

    .spinner:before {
        content: 'Loading…';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 24px;
        margin-top: -13px;
        margin-left: -13px;
    }

    .spinner:not(:required):before {
        content: '';
        border-radius: 50%;
        border: 3px solid #ccc;
        /*border-top-color: #03ade0;*/
        border-top-color: #4187b5;
        animation: spinner .6s linear infinite;
        -webkit-animation: spinner .6s linear infinite;
    }

Answer 6

为了实现它，我正在加载我身体末端的所有脚本。在我的app-wrapper-div之前，我将一个位置固定为＃34; loading＆＃34; -div。它会在加载其他脚本之前立即显示。

在正文的末尾，在我的脚本被包含之后，我放置一个角度指令，即fadeOut并删除loading-div。

代码：

<html ng-app="myApp">
<head>
  <!-- the only file loaded in the head -->
  <link rel="stylesheet" href="/.../appLoadingScreen.css"/>
</head>
<body>
    <div id="appLoadingScreen">
      <div id="appLoadingScreenCenterWrap">
        <h1 id="appLoadingScreenHeader">APP TITLE</h1>
        <p id="appLoadingScreenMsg">App is loading!</p>
      </div>
    </div>
    <div id="appWrapper" ng-controller="appCtrl"> 
    ... 
    </div>
    <!-- All stylesheet includes -->
    ...
    <!-- All script includes -->
    ...
    <script src="/.../hideLoadingScreen.js"></script>
    <hide-loading-screen></hide-loading-screen>
</body>
</html>

hideLoadingScreen指令：

(function() {
  var app = angular.module('appModule');
  app.directive('hideLoadingScreen', function($timeout) {
    return {
      restrict: 'E',
      link: function() {
        $timeout(function() {
          $("#appLoadingScreen").fadeOut(600, function(){$(this).remove();});
        }, 400);
      }
    };
  });
})();

AngularJS：如何在页面完全加载之前显示预加载或加载？

6 个答案:

`# UPDATE [August 2017]`