angular-lazy-load
Version:
2kb lazy load directive for angular. includes directive for lazy loading images.
7 lines (6 loc) • 2.94 kB
JavaScript
(function(){window._||(window._={throttle:function(e,c,g){c||(c=250);var b,d;return function(){var f=g||this,a=+new Date,h=arguments;b&&a<b+c?(clearTimeout(d),d=setTimeout(function(){b=a;e.apply(f,h)},c+b-a)):(b=a,e.apply(f,h))}}});var q=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,g){var b={intersectionThreshold:.1,throttleWait:20,unobserveInstantly:!0,observeInstantly:!0,useIntersectionObserver:g.useIntersectionObserver,intersectionRoot:null,intersectionRootMargin:"0px",scrollOffset:g.scrollOffset};return{restrict:"A",link:function(d,f,a){var h=d.$eval(a.onScrollTo),g={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)},m;for(m in g){var n=g[m];null!=n&&(b[m]=n)}if(b.useIntersectionObserver&&"undefined"!==typeof IntersectionObserver){null!=b.scrollOffset&&b.intersectionRootMargin&&(a=b.intersectionRootMargin.split(" ").splice(0,1),a=a.concat([b.scrollOffset+"px"]),a.join(" "));var k=new IntersectionObserver(function(a){if(0!=
a[0].intersectionRatio&&(d.$apply(h),b.unobserveInstantly))return k.unobserve(f[0])},{root:b.intersectionRoot,rootMargin:b.intersectionRootMargin,threshold:b.intersectionThreshold});return k.observe(f[0])}var r=b.scrollOffset||0,t=function(){var a=function(a){return a[0].getBoundingClientRect().top+window.pageYOffset-a[0].ownerDocument.documentElement.clientTop},c=angular.element(b.intersectionRoot);if((c[0]?a(c)+c[0].offsetHeight:window.innerHeight+window.pageYOffset)>a(f)-r&&(d.$apply(h),b.unobserveInstantly))return e.removeEventListener("scroll",
l)},l=q.throttle(function(a){if(null==f[0].offsetParent)return!1;t()},b.throttleWait);try{var p=window.self!==window.top}catch(u){p=!0}p?d.$apply(h):(e.addEventListener("scroll",l),b.observeInstantly&&c(l));a.trigger&&d.$watch(a.trigger,function(a,b){a!==b&&h()});d.$on("$destroy",function(){b.useIntersectionObserver?k&&k.unobserve(f[0]):e.removeEventListener("scroll",l)})}}}]).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}}])})();