angularjs image loading preloader.

angularjs, directive, $watch, jQuery

by Seetpal Singh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<input type='radio' ng-model="src" value="https://stephenlewisfoundation.files.wordpress.com/2010/05/mural-big-shoes-south-africa-kristina-laukkanen-may-3-2010.jpg">

<input type='radio' ng-model="src" value="https://d2fijpsef22722.cloudfront.net/photos/massive/1942178592-big-island.jpg">

<br/>
<br/>
<div ng-controller="c" id='bing'>
  <img class="spinner" src="{{src}}" width='200' imageonload />
  <span class="loading"> <img src="https://www.yugma.com/images/loading-animation-7.gif"/></span>

</div>

CSS

.spinner-hide .loading {
              visibility: visible;
            }
            
            .spinner-show .loading {
              visibility: hidden;
            }

JavaScript

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

app.directive('imageonload', function() {
  return {
    restrict: 'A',

    link: function(scope, element) {
      element.bind('load', function() {
        // Set visibility: true + remove spinner overlay
        jQuery('#bing').removeClass('spinner-hide');
        jQuery('#bing').addClass('spinner-show');
        //              jQuery('#bing').parent().find('span').remove();
      });
    }
  };
});

app.controller('c', function($scope) {

  $scope.$watch('src', function(newval, oldval) {
    jQuery('#bing').removeClass('spinner-show');
    jQuery('#bing').addClass('spinner-hide');
  })

});