test/test_img_src_ondemand.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Scroll Trigger</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
  <script src="../dist/scroll-trigger.js"></script>
  <script>
    angular.module('demo', ['scroll-trigger'])
    .directive('lazyImg', function(ScrollTrigger) {
      return {
        restrict: 'A',
        scope: true,
        link: function(scope, elem) {
          scope.displayImage = function(randint) {
            elem[0].setAttribute('src', 'http://lorempixel.com/g/200/200?_=' + randint);
          };
        }
      };
    })
    .run(function() {
      for (var i = 0; i < 5; ++i) {
        var img = document.createElement('img')
        img.setAttribute('lazy-img', true);
        img.setAttribute('scroll-trigger', 'displayImage(' + Math.random() + ')');
        document.body.appendChild(img);
      }
    });
  </script>
  <style>
    div {
      width: 200px;
      height: 1000px;
    }
    .placeholder {
      background-color: #000;
    }
    img {
      display: block;
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body ng-app="demo">
  <div class="placeholder"></div>
</body>

</html>