如何在 html 上加载加载器，直到使用 angularjs 加载所有图像？答案

【问题标题】：How to load a loader on html until all images are loaded using angularjs?如何在 html 上加载加载器，直到使用 angularjs 加载所有图像？
【发布时间】：2019-01-10 21:04:10
【问题描述】：

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

在这里我试图显示一个加载器，直到图像完全加载到我的页面中。有时当我的带宽较低时，从谷歌驱动器加载图像需要时间。所以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;

                });

            });
        }
    };
}]);

请查看我的plunkr

【问题讨论】：

标签： javascript html angularjs networking loader

【解决方案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

【讨论】：

试过了，但直到图像未完全加载后才显示
应该可以了，你是通过http调用加载图片吗
你能不能给个小家伙
我在我的问题中发布了一个 plunkr
不显示任何与加载相关的内容，它只是静态数据