• Stars
    star
    127
  • Rank 282,790 (Top 6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated 10 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

  1. Import DeferLoadModule into the module corresponding to your component

  2. 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.

Server Side Rendering

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>

Fall back support

ng-defer-load supports a fall back in browsers or devices (like older iPhones) that do not support the IntersectionObserver API. This uses the scroll position and the element's offset. This is enabled by default.

If you do not want to allow this fallback, and would prefer the browser to just render the element regardless, you can set fallbackEnabled to false on the element as below:

  <div
    [fallbackEnabled]="false"
    (deferLoad)="showMyElement=true">
    <my-element
       *ngIf=showMyElement>
      ...
    </my-element>
</div>

Demo

Demo of ng-defer-load in use is available here.

License

Released under the MIT license.

Release notes

v1.0.1 - Initial version

v1.1.0 - Supports Universal - Server Side Rendering

v2.0.0 - Supports Angular 6

v3.0.0 - Supports Angular 7

v3.1.0 - Made it possible to switch off scroll fallback

v8.0.0 - Supports Angular 8/9

v8.1.0 - Supports more package formats (using ng-packagr)

v8.2.0 - Added option to remove listeners after load

v8.2.1 - Fix for IE11 and older browsers

v8.2.2 - Updated dependencies due to security advisories

v14.0.0 - Supports Angular 12+ (targeting Angular 14) with partial Ivy builds. Additionally, drops support for IE11.

More Repositories

1

MapMe

The Android maps adapter
Kotlin
841
star
2

bootup.js

Cache and load static files from local storage.
JavaScript
820
star
3

Covert

Covert is an Android library for Material Swipe Actions within a RecyclerView
Kotlin
365
star
4

ReviewMe

Google Play and App Store reviews posted to Slack
JavaScript
180
star
5

PlayMe

JavaScript
51
star
6

konfigure

An Application Configuration Library based on Kotlin Property Delegation
Kotlin
34
star
7

tractor

A UI around Protractor to help write E2E tests for Angular applications without needing to know JavaScript
JavaScript
26
star
8

IncludeMe

A Gradle plugin that simplifies working with composite builds
Kotlin
25
star
9

angular-master-class-exercises

18
star
10

Plunge

An Android Library for building and testing Deep Link handling
Kotlin
10
star
11

iOSWrapper

Official Trade Me API for iOS
Objective-C
9
star
12

tm-feature-toggle

Feature toggle module for Angular. AoT friendly, lazy-loaded component and route based feature toggling.
TypeScript
6
star
13

ngAddToCalendar

TypeScript
5
star
14

trade-me-api-wrapper

# This project is depricated # This is a .NET library to authenticate via OAuth, and access data from Trade Me's Developer API.
C#
4
star
15

KeyboardDodger

An iOS cocoapod that uses a constraint to move a view out of the way of the on-screen keyboard.
Swift
4
star
16

ensure

Utility decorators for Trade Me
TypeScript
4
star
17

TradeMe-IconFont

Trade Me Classic iconfont
HTML
3
star
18

OAuthExample

Example of how to use OAuth with the Trade Me API
C#
2
star
19

add2Calendar

A small lib to provide integration with online and desktop calendars
TypeScript
1
star
20

ngrx

TypeScript
1
star
21

KotlinBeyondCompare

A Kotlin syntax plugin for Beyond Compare
Kotlin
1
star