Package Exports

infinite-circle
infinite-circle/es/infiniteCircle.js
infinite-circle/lib/infiniteCircle.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (infinite-circle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

infinite-circle

The utility for synchronising reading and writing operation in browser. The infinite is a smart and automatic on and off loop for saving resources. It's use full for reading a writing operation on DOM which may normally cause layout thrashing.

Installation

npm i infinite-circle --save

Usage

import { Circle, Infinite } from 'infinite-circle';

// defined action which cause running read and write operation
let visibilityCircle = new Circle({
    listen: notify => {
        window.addEventListener('scroll', notify);
        window.addEventListener('resize', notify);
    },
    unlisten: notify => {
        window.removeEventListener('scroll', notify);
        window.removeEventListener('resize', notify);
    }
});

// defined read and write operation
const img1 = document.querySelector('.img1');
let img1CircleId = visibilityCircle.register({
    read: () => {
        let rect = img1.getBoundingClientRect();

        return intersectionPercentage(rect);
    },
    write({ payload }) => {
        if (payload > 0) {
            loadImage(img1);
            visibilityCircle.unregister(img1CircleId);
        }
    }
});
// register more elements

// register circle to synchronising infinite loop
let infinite = new Infinite();
infinite.add(visibilityCircle);

// other functions
function intersectionPercentage(rect) {
    .
    .
    .
    return percent;
}

function loadImage(imageElement) {
    .
    .
    .
}