@trademe/ng-defer-load v14.1.0
ng-defer-load
ng-defer-load is an Angular directive to load elements lazily.
It uses Intersection Observer API to check if an element is in viewport and falls back to scroll detection mechanism for unsupported browsers.
Installation
Using npm:
$ npm i @trademe/ng-defer-load
Usage
Import
DeferLoadModule
into the module corresponding to your componentUse the directive with the element you wish to lazy load
<div
(deferLoad)="showMyElement=true">
<my-element
*ngIf=showMyElement>
...
</my-element>
</div>
Note: You might want to have a loading state for your element with approximately same height as the element.
Demo
Demo of ng-defer-load in use is available here.
License
Released under the MIT license.
3 months ago
4 months ago
4 months ago
1 year ago
1 year ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago