lazy-observer

lazyObserver

lazyObserver is a minimalist script to easily execute function when HTML element is intersecting. Callback can be exececuted once or every trigger.

More information about the IntersectionObserver API on MDN.

Installation

The plugin is available as the lazy-observer package name on npm and Github.

npm i --save-dev lazy-observer

yarn add --dev lazy-observer

Environment

lazyObserver was built for Node.js >=8.11.2.

Usage

Basic usage

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

const LazyObserver = require('lazy-observer');

const lazyObserver = new LazyObserver({
    element: 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.

const LazyObserver = require('lazy-observer');

const lazyObserver = new LazyObserver({
    element: 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.

const LazyObserver = require('lazy-observer');

const lazyObserver = new LazyObserver({
    element: 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.

const LazyObserver = require('lazy-observer');

const lazyObserver = new LazyObserver({
    element: 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

HTMLElement

Tells to the function the target element.

onIntersection

function

Specifies the function to execute when the element is intersecting.

once

boolean = true

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

rootMargin

string = 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.