angular.module('myApp', ['angular-lazy-load']).controller('myController', ['$scope',
function($scope) {
$scope.doSomething = function() {
console.log("Doing something!");
}
}
]);
<html>
<head>
<script data-require="angularjs@1.6.4" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="AngularLazyLoad.min.js"></script>
<style type="text/css">
img {
width: 150px;
height: 150px;
display: block;
background: whitesmoke;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<div style="height: 1000px;"></div>
<div scroll-to="doSomething"></div>
<img lazy-src="http://lorempixel.com/300/300/cats" ng-lazy-load aot="true" />
<img lazy-src="http://lorempixel.com/300/300/cats" ng-lazy-load aot="true" />
<img lazy-src="http://lorempixel.com/300/300/cats" ng-lazy-load aot="true" scroll-offset="300" />
<div style="height: 200px;"></div>
<img lazy-src="http://lorempixel.com/300/300/cats" ng-lazy-load />
<img lazy-src="http://lorempixel.com/300/300/cats" ng-lazy-load />
<img lazy-src="http://lorempixel.com/300/300/cats" ng-lazy-load />
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
/* Put your css in here */
(function(){window._||(window._={throttle:function(e,c,f){c||(c=250);var b,d;return function(){var g=f||this,a=+new Date,l=arguments;b&&a<b+c?(clearTimeout(d),d=setTimeout(function(){b=a;e.apply(g,l)},c+b-a)):(b=a,e.apply(g,l))}}});var p=window._;angular.module("angular-lazy-load",[]).provider("lazyLoad",function(){this.scrollOffset=null;this.useIntersectionObserver=!0;this.setScrollOffset=function(e){this.scrollOffset=e};this.setUseIntersectionObserver=function(e){this.useIntersectionObserver=e};
this.$get=function(){return this}}).directive("onScrollTo",["$window","$timeout","lazyLoad",function(e,c,f){var b={intersectionThreshold:.1,throttleWait:20,unobserveInstantly:!0,observeInstantly:!0,useIntersectionObserver:f.useIntersectionObserver,intersectionRoot:null,intersectionRootMargin:"0px",scrollOffset:f.scrollOffset};return{restrict:"A",link:function(d,g,a){var f=d.$eval(a.onScrollTo);a={intersectionRatio:d.$eval(a.scrollThreshold),throttleWait:d.$eval(a.scrollThrottle),unobserveInstantly:d.$eval(a.scrollUnobserve),
observeInstantly:d.$eval(a.scrollObserve),intersectionRoot:d.$eval(a.scrollRoot),intersectionRootMargin:d.$eval(a.scrollRootMargin),scrollOffset:d.$eval(a.scrollOffset),useIntersectionObserver:d.$eval(a.useIo)};for(var h in a){var m=a[h];null!=m&&(b[h]=m)}if(b.useIntersectionObserver&&"undefined"!==typeof IntersectionObserver){null!=b.scrollOffset&&b.intersectionRootMargin&&(h=b.intersectionRootMargin.split(" ").splice(0,1),h=h.concat([b.scrollOffset+"px"]),h.join(" "));var n=new IntersectionObserver(function(a){if(0!=
a[0].intersectionRatio&&(d.$apply(f),b.unobserveInstantly))return n.unobserve(g[0])},{root:b.intersectionRoot,rootMargin:b.intersectionRootMargin,threshold:b.intersectionThreshold});return n.observe(g[0])}var q=b.scrollOffset||0,k=p.throttle(function(a){if(null==g[0].offsetParent)return!1;a=function(a){return a[0].getBoundingClientRect().top+window.pageYOffset-a[0].ownerDocument.documentElement.clientTop};var c=angular.element(b.intersectionRoot);if((c[0]?a(c)+c[0].offsetHeight:window.innerHeight+
window.pageYOffset)>a(g)-q&&(d.$apply(f),b.unobserveInstantly))return e.removeEventListener("scroll",k)},b.throttleWait);e.addEventListener("scroll",k);b.observeInstantly&&c(k)}}}]).directive("ngLazyLoad",["lazyLoad",function(e){return{restrict:"A",controller:["$element",function(c){this.scrollOffset=e.scrollOffset;this.aot=c.attr("aot")||!1;this.scrollHandler=function(e){c.attr("lazy-src")&&(c.attr("src",c.attr("lazy-src")),c.removeAttr("lazy-src"));c.attr("use-io")&&c.removeAttr("use-io")}}],controllerAs:"ll",
template:"\x3cimg on-scroll-to\x3d'll.scrollHandler' use-io\x3d'!ll.aot' /\x3e",replace:!0,priority:50}}])})();