Lazy-observer NPM

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();