angular-lazy-load
Version:
2kb lazy load directive for angular. includes directive for lazy loading images.
41 lines (40 loc) • 1.53 kB
HTML
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="../../dist/js/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 on-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">
angular.module('myApp', ['angular-lazy-load'])
.config(function(lazyLoadProvider) {
lazyLoadProvider.setUseIntersectionObserver(true);
})
.controller('myController', ['$scope',
function($scope) {
$scope.doSomething = function() {
console.log("Doing something!");
}
}
]);
</script>
</body>
</html>