virenratan/app.js

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

app.controller('MainCtrl', function($scope) {
  $scope.test = 'https://www.filepicker.io/api/file/FueFmlDQ7iLU1HRGmMSx/convert?w=550&h=550&fit=crop';
});

app.directive('lazyBackground', ['$document', '$parse', function($document, $parse) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      function setLoading(elm) {
        if (loader) {
          elm.html('');
          elm.append(loader);
          elm.css({
            'background-image': null
          });
        }
      }
      var loader = null;
      if (angular.isDefined(attrs.lazyLoader)) {
        loader = angular.element($document[0].querySelector(attrs.lazyLoader)).clone();
      }
      var bgModel = $parse(attrs.lazyBackground);
      scope.$watch(bgModel, function(newValue, oldValue) {
        setLoading(element);
        var src = bgModel(scope),
        img = document.createElement('img');
        console.log('loading');
        img.onload = function() {
          if (loader) loader.remove();
          if (angular.isDefined(attrs.lazyLoadingClass)) {
            element.removeClass(attrs.lazyLoadingClass);
          }
          if (angular.isDefined(attrs.lazyLoadedClass)) {
            element.addClass(attrs.lazyLoadedClass);
            console.log('loaded');
          }
          element.css({
            'background-image': 'url(' + this.src + ')'
          });
        };
        img.onerror= function() {
          //console.log('error');
        };
        img.src = src;
      });
    }
  };
}]);

## index.html
<!doctype html>
<html ng-app="lazy">
  <head>
    <meta charset="utf-8" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body ng-controller="MainCtrl">

    <div class="thumb loading" lazy-loading-class="loading" lazy-loaded-class="loaded" lazy-background="test"></div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
    <script>window.angular || document.write('<script src="/js/vendor/angular.min.js"><\/script>')</script>
    <script src="app.js"></script>
  </body>
</html>

## style.css
.thumb {
  height: 125px;
  width: 125px;
  background-size: cover;
  background-position: 50% 50%;
}

.loading {
  border: 1px solid red;
}
	var app = angular.module('lazy', []);

	app.controller('MainCtrl', function($scope) {
	$scope.test = 'https://www.filepicker.io/api/file/FueFmlDQ7iLU1HRGmMSx/convert?w=550&h=550&fit=crop';
	});

	app.directive('lazyBackground', ['$document', '$parse', function($document, $parse) {
	return {
	restrict: 'A',
	link: function(scope, element, attrs) {
	function setLoading(elm) {
	if (loader) {
	elm.html('');
	elm.append(loader);
	elm.css({
	'background-image': null
	});
	}
	}
	var loader = null;
	if (angular.isDefined(attrs.lazyLoader)) {
	loader = angular.element($document[0].querySelector(attrs.lazyLoader)).clone();
	}
	var bgModel = $parse(attrs.lazyBackground);
	scope.$watch(bgModel, function(newValue, oldValue) {
	setLoading(element);
	var src = bgModel(scope),
	img = document.createElement('img');
	console.log('loading');
	img.onload = function() {
	if (loader) loader.remove();
	if (angular.isDefined(attrs.lazyLoadingClass)) {
	element.removeClass(attrs.lazyLoadingClass);
	}
	if (angular.isDefined(attrs.lazyLoadedClass)) {
	element.addClass(attrs.lazyLoadedClass);
	console.log('loaded');
	}
	element.css({
	'background-image': 'url(' + this.src + ')'
	});
	};
	img.onerror= function() {
	//console.log('error');
	};
	img.src = src;
	});
	}
	};
	}]);
	<!doctype html>
	<html ng-app="lazy">
	<head>
	<meta charset="utf-8" />
	<script>document.write('<base href="' + document.location + '" />');</script>
	<link rel="stylesheet" href="style.css" />
	</head>
	<body ng-controller="MainCtrl">

	<div class="thumb loading" lazy-loading-class="loading" lazy-loaded-class="loaded" lazy-background="test"></div>

	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
	<script>window.angular \|\| document.write('<script src="/js/vendor/angular.min.js"><\/script>')</script>
	<script src="app.js"></script>
	</body>
	</html>
	.thumb {
	height: 125px;
	width: 125px;
	background-size: cover;
	background-position: 50% 50%;
	}

	.loading {
	border: 1px solid red;
	}