Angular Intersection Observer 2kb Lazy Load Module

Angular Lazy Loading is a 2KB Lazy Loading Angular Module. The only requirement is angular! By default, IntersectionObserver is used instead of attaching an event listener to the document. Optionally, you can use the event listener instead of preloading things.

It comes with a lazy loading routing for slow-loading images, but you can extend the swipe to lazy loading routing for anything! Also, to detect scrolling in a container, set the scroll root attribute to delimited.

lazy loading on scroll in angular, while implementing lazy loading using the intersection observer api, lazy loading in angular example, angular lazy load images

How to make use of it:

Install

npm install angular-lazy-load

Usage

angular.module('myApp', ['angular-lazy-load'])
  .config(function(lazyLoadProvider) {
    lazyLoadProvider.setUseIntersectionObserver(true);
  })
  .controller('myController',
    ['$scope', function() {
        $scope.doSomething = function() {
          console.log("Doing something!");
        }
    }]
  );

<body ng-app="myApp">
  <div ng-controller="myController">
    <div style="height: 1000px;"></div>
    <div on-scroll-to="doSomething"></div>

    <div style="height: 1000px;"></div>
    <img lazy-src="https://lorempixel.com/300/300/cats" ng-lazy-load/>
  </div>
</body>

<div on-scroll-to="doSomething" scroll-threshold="0.1" scroll-throttle="20" scroll-unobserve="true" scroll-root="null" scroll-root-margin="0px" scroll-offset="0" use-io="true" scroll-observe="true"></div>

<img lazy-src="myImg" ng-lazy-load />

intersectionobserver lazy loader for angular, angular lazy loading Plugin/Github, angular intersection observer infinite scroll, intersection observer angular example