yoriiis / lazy-observer

Observer module with Intersection Observer to execute a function when the element is intersecting

lazyObserver

lazy-observer is a minimalist script to easily execute function when HTML element is intersecting. Callback can be executed once or every trigger.

More information about the IntersectionObserver API on MDN.

Installation

NPM

NPM is the recommended installation method. Install lazy-observer in your project with the following command:

npm install lazy-observer --save-dev

yarn add lazy-observer --dev

Warning validate-target@3 is ESM.

Note Minimum supported Node.js version is 16.20.0.

CDN

You can also download it and include it with a script tag. The library will be registered as the global variable window.LazyObserver.

<script src="https://cdn.jsdelivr.net/npm/lazy-observer@2" crossorigin></script>

Note You can browse the source of the NPM package at jsdelivr.com/package/npm/lazy-observer.

How it works

Basic usage

The following example display a console.log statement when the .footer HTML element is positioned at one screen height.

new LazyObserver({
  elements: document.querySelector('.footer'),
  onIntersection: () => console.log('Function is triggered')
});

lazyObserver.observe();

Once or not

The following example displays a console.log statement each time the HTML .footer element is positioned at one screen height.

new LazyObserver({
  elements: document.querySelector('.footer'),
  once: false,
  onIntersection: () => {
    console.log('Function is triggered');
  }
});

lazyObserver.observe();

Change the offset

The following example displays a console.log statement when the HTML .footer element is positioned directly at the bottom of the screen. See the rootMargin documentation.

new LazyObserver({
    elements: document.querySelector('.footer'),
    rootMargin: '0px 0px 0px 0px'
    onIntersection: () => {
        console.log('Function is triggered');
    }
});

lazyObserver.observe();

Example with dynamic import

The following example displays a console.log statement when the HTML .footer element is positioned directly at the bottom of the screen.

new LazyObserver({
    elements: document.querySelector('.footer'),
    rootMargin: '0px 0px 0px 0px'
    onIntersection: () => {
        import(/* webpackChunkName: "footer-video" */ 'footer-video.js'
        ).then(() => {
            console.log('Module footer-video is loaded');
        });
    }
});

lazyObserver.observe();

---

Parameters

element

Type:

type elements = HTMLElement | HTMLElement[];

Default: null

Tells to the function the target element(s).

onIntersection

Type:

type onIntersection = () => void;

Default: () => {}

Specifies the function to execute when the element is intersecting.

once

Type:

type once = boolean;

Default: true

Specifies the function is the callback is executed once or at every trigger.

rootMargin

Type:

type rootMargin = string;

Default:

`0px 0px ${window.innerHeight}px 0px`;

Specifies the function the offset for the Intersection Observer.

Licence

lazyObserver is licensed under the MIT License.

Created with ♥ by @yoriiis.