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.
Using npm:
$ npm i @trademe/ng-defer-load
-
Import
DeferLoadModule
into the module corresponding to your component -
Use 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.
ng-defer-load
supports Server Side Rendering from version 1.1.0
It loads the element on the server by default supporting Search Engine Optimization. If you do not want to pre-render the element in server, you can set preRender
to false on the element as below:
<div
preRender="false"
(deferLoad)="showMyElement=true">
<my-element
*ngIf=showMyElement>
...
</my-element>
</div>
Demo of ng-defer-load in use is available here.
Released under the MIT license.
v1.0.1 - Initial version
v1.1.0 - Supports Universal - Server Side Rendering
v2.0.0 - Supports Angular 6