JSFiddle - React, Tailwind, and code Playground

by qhoc

HTML

<div ng-controller="c">
    <img class="spinner" src="{{src}}" 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.on('load', function() {
            // Set visibility: true + remove spinner overlay
              element.removeClass('spinner-hide');
              element.addClass('spinner-show');
              element.parent().find('span').remove();
          });
          scope.$watch('ngSrc', function() {
            // Set visibility: false + inject temporary spinner overlay
              element.addClass('spinner-hide');
              // element.parent().append('<span class="spinner"></span>');
          });
        }
    };
});

app.controller('c', function($scope) {
    $scope.src ="https://s3.amazonaws.com/StartupStockPhotos/uploads/46.jpg";
});