AngularJS: How to preload images at first page start in angularjs

Question

I have a json object with images urls and I display those images with ng-repeat. My problem is that images are flickering when page is loaded for first time. I would like to display preloader (css spinner) and preload all images and than apply ng-repeat.

-> Plnkr

something like https://github.com/RevillWeb/angular-preload-image ? — ale, Sep 12 '17 at 07:03

lin · Accepted Answer · 2017-09-13T08:29:57.293

Easy doing while using angular-easy-image-preloader like in this demo plnkr.

View

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

AngularJS controller

 /* 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.
    });
  });

Thanks it help, but is there any chance preserve css animation which I have on images? Images should fade in and scale up. Styles : .appear.ng-enter .appear.ng-enter.ng-enter-active — DuFuS, Sep 12 '17 at 09:35
All at onece : like here : http://www.d3d.sk/ (but you have to refresh with f5 after first load to get rid off flickering and saw animation) — DuFuS, Sep 12 '17 at 09:41
@DuFuS It's runs perfectly with AngularJS 1.2.2 but it doesnt work with 1.6.4. I opened up an other question: https://stackoverflow.com/questions/46174581/nganimate-stoped-working-in-v1-6-4 lets see why this happends. — lin, Sep 12 '17 at 10:56
I've tried it with angularjs 1.2.2 but it not work for images :(. Plnkr : http://plnkr.co/edit/iPJIy2?p=preview — DuFuS, Sep 13 '17 at 07:52
@DuFuS its working fine. Just move the `ng-if` in the image element itself like in this demo http://plnkr.co/edit/3xqUPo?p=preview You may going to accept this answer? I will update this answer once the bug with Angular 1.6.4 is fixed. — lin, Sep 13 '17 at 08:29
@DuFuS Huh, yea it does work. Crazy, well.. lets see why this is not https://stackoverflow.com/questions/46174581/nganimate-stoped-working-in-angularjs-1-6-4 Glad to help ya. — lin, Sep 13 '17 at 09:23

AngularJS: How to preload images at first page start in angularjs

1 Answers1

View

AngularJS controller