AngularJS：如何在AngularJS的第一页开始时预加载图像

我有一个带有图像URL的json对象，我用

ng repeat

显示这些图像。我的问题是，第一次加载页面时，图像会闪烁。我想显示预加载程序（css微调器）并预加载所有图像，然后应用

ng repeat

->

像这样使用时容易操作

看法

---

类似于？你能在这里发布你的代码吗？我已经发布了plunker链接，所以代码就在那里。谢谢它的帮助，但是有没有可能保留我在图像上的css动画？图像应该淡入并放大。样式：.EXPENCE.ng-enter.EXPENCE.ng-enter.ng-enter-active@DuFuS一次全部加载还是一个图像一个图像地加载？一个图像一个图像地加载？就像这里：（但是你必须在第一次加载后用f5刷新才能消除闪烁并看到动画）@DuFuS它工作得很好。只需移动图像元素本身中的

ng，就像在本演示中一样，您会接受这个答案吗？一旦Angular 1.6.4的错误被修复，我会更新这个答案。非常感谢。它也适用于angularjs 1.6.4。
<div class="gallery" ng-controller="galleryController">
  <img ng-if="loaded" class="appear" ng-repeat="picture in pictures" ng-src="{{picture}}" alt="">
  <div ng-if="!loaded">
    <div id="preloader-overlay">
        <div id="preloader"></div>
    </div>
  </div>
</div>

 /* Gallery Controller */
  app.controller('galleryController', function(
      $scope,
      $timeout,
      preloader
    ) {

    $scope.loaded = false;
    $scope.pictures = [
        "http://www.d3d.sk/images/MK2_Granade_full.png",
        "http://www.d3d.sk/images/aberry-logo.jpg",
        "http://www.d3d.sk/images/logo-aberry.png",
        "http://www.d3d.sk/images/Crystal_balls.jpg",
        "http://www.d3d.sk/images/Purple_sun.jpg",
        "http://www.d3d.sk/images/planets.jpg",
        "http://www.d3d.sk/images/d3d.jpg",
        "http://www.d3d.sk/images/bpg-logo.png",
        "http://www.d3d.sk/images/Logo - Bukona.jpg",
        "http://www.d3d.sk/images/sky_up_fire.jpg",
        "http://www.d3d.sk/images/plexus.jpg",
        "http://www.d3d.sk/images/dch.jpg",
        "http://www.d3d.sk/images/Dimonsium-front-a.jpg",
        "http://www.d3d.sk/images/DWTS-3.jpg",
        "http://www.d3d.sk/images/Dwts-redesign-1.png",
        "http://www.d3d.sk/images/diplom.jpg",
        "http://www.d3d.sk/images/Genessis.jpg",
        "http://www.d3d.sk/images/Genessis - logo-final.jpg",
        "http://www.d3d.sk/images/Genessis - logo.jpg",
        "http://www.d3d.sk/images/Goholor.jpg",
        "http://www.d3d.sk/images/iron.jpg",
        "http://www.d3d.sk/images/bg_body3.jpg",
        "http://www.d3d.sk/images/bg_body4.jpg",
        "http://www.d3d.sk/images/lampa-2.png",
        "http://www.d3d.sk/images/MaxEnergy-design.jpg",
        "http://www.d3d.sk/images/North-first-2.jpg",
        "http://www.d3d.sk/images/North Side Dres - ver 1c.jpg",
        "http://www.d3d.sk/images/oznamko-16.jpg",
        "http://www.d3d.sk/images/oznamko-17.jpg",
        "http://www.d3d.sk/images/Verzia4e.jpg",
        "http://www.d3d.sk/images/Svk-dres.jpg",
        "http://www.d3d.sk/images/Rool-up04bc.jpg",
        "http://www.d3d.sk/images/Senica-letak-maly.jpg",
        "http://www.d3d.sk/images/Merkur - dizajn - 4.jpg",
        "http://www.d3d.sk/images/Trades-world-2.jpg",
        "http://www.d3d.sk/images/web-1.jpg",
        "http://www.d3d.sk/images/web-3.jpg",
        "http://www.d3d.sk/images/web-5.jpg",
        "http://www.d3d.sk/images/web-7.jpg",
        "http://www.d3d.sk/images/web-8.jpg",
        "http://www.d3d.sk/images/web-10.jpg",
        "http://www.d3d.sk/images/web-11.jpg",
        "http://www.d3d.sk/images/vizitka.jpg"
      ];

    preloader.preloadImages($scope.pictures).then(function() {
         $scope.loaded = true;
    },function() {
        console.log('failed');
        // Loading failed on at least one image.
    });
  });