如何在html上加载加载程序，直到使用angularjs加载所有图像为止？

Question

我有简单的angular js应用程序。 在这里，我正在从Google驱动器中获取图像并显示在页面中。

在这里，我试图显示一个加载器，直到图像完全加载到我的页面中为止。 有时，当我的带宽较低时，需要花一些时间从Google驱动器加载图像。 所以i want to implement a loader on my screen until all images are fully loaded 。

我怎么知道什么时候图像完全加载，然后我才能隐藏我的加载器。 我不想使用setTimeout（）。

index.html

    <!DOCTYPE html>
    <html>

      <head>
        <link rel="stylesheet" href="style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <script src="script.js"></script>
      </head>

      <body ng-app="basicApp">
        <div ng-controller="ListController">
<h1 ng-if="loading"> loading</h1>
         <div ng-if="!loading"  class="col-lg-6 col-md-6 col-sm-6 col-xs-6"  ng-repeat="url in urls" imageload>
              <div>
                  <div>
                      <div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
                          <a>
                              <img src={{url}} alt={{url}} style="width:auto;max-width:100%"
                              />
                          </a>
                          <div style="display:block;font-size:90%"></div>
                      </div>
                  </div>
              </div>
          </div>
        </div>
      </body>
    </html>

控制者

    app.controller('ListController', ['$scope', '$location', '$window', function ($scope, $location, $window) {

  var data = [
    'https://drive.google.com/uc?export=view&id=1wZdBP8CMyLDOFGcvWY7KpffMhTRBHt1J',
    'https://drive.google.com/uc?export=view&id=1zc1LqOPUQLbL4-LKBlDAOsetcqMgcWpi',
    'https://drive.google.com/uc?export=view&id=1lB4SaiYedYfsxlXJEykC9ErJq8R40e3y'
  ]
    function getAll() {
         $scope.urls = data;

    }
    function init() {
      $scope.loading = true;
        getAll();
    }
    init();
}]);

指示

app.directive('imageload', ['$timeout', function ($timeout, $scope) {
    return {
        restrict: 'A',
        link: function (scope, ele) {
            $timeout(function () {
                var img = angular.element(ele.find('img')[0]);
                console.log(img);
                $scope.loading = true;
                img.bind('load', function () {
                  console.log('img is loaded');
                    $scope.loading = false;

                });

            });
        }
    };
}]);

请检查我的朋克

Answer 1

您可以使用布尔变量并根据状态分配值，

 <h1 ng-if="loading"> loading</h1>
    <div ng-if="!loading" class="col-lg-6 col-md-6 col-sm-6 col-xs-6" ng-repeat="url in urls">
      <div>
        <div>
          <div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
            <a>
              <img src={{url}} alt={{url}} style="width:auto;max-width:100%" />
            </a>
            <div style="display:block;font-size:90%"></div>
          </div>
        </div>
      </div>
    </div>

在控制器中

 function getAll() {
    $scope.urls = data;
    $scope.loading = false;
  }

  function init() {
    $scope.loading = true;
    getAll();
  }

DEMO

如何在html上加载加载程序，直到使用angularjs加载所有图像为止？

问题描述

1 个解决方案

解决方案1
0 2018-08-03 02:59:05

如何在html上加载加载程序，直到使用angularjs加载所有图像为止？

问题描述

1 个解决方案

解决方案1 0 2018-08-03 02:59:05

解决方案1
0 2018-08-03 02:59:05