@tjoskar/react-lazyload-img/dist/cjs/lazyload.js

Lazy image loader for react

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const defaultObserverOptions = {
    root: undefined,
    rootMargin: undefined,
    threshold: undefined
};
const observerKeys = [];
const observers = new WeakMap();
const images = new WeakMap();
exports.call = fn => fn && fn();
exports.isNull = (obj) => obj === null;
const createIntersectionObserver = (options) => new IntersectionObserver(loadingCallback, options);
function loadingCallback(entrys) {
    entrys.filter(entry => entry.isIntersecting).forEach(entry => {
        const target = entry.target;
        const metaData = images.get(target);
        if (!metaData) {
            console.warn('Could not find meta data for image');
            return;
        }
        metaData.observer.unobserve(target);
        loadImage(metaData.options.image)
            .catch(() => {
            if (metaData.options.errorImage) {
                return loadImage(metaData.options.errorImage);
            }
            return Promise.resolve(metaData.options.defaultImage);
        })
            .catch(() => metaData.options.defaultImage)
            .then((imagePath) => {
            setImage(target, imagePath);
            addCssClassName(target, 'lazy-loaded');
            exports.call(metaData.options.onLoaded);
        });
    });
}
function setImage(element, imagePath) {
    if (isImageElement(element)) {
        element.src = imagePath;
    }
    else {
        element.style.backgroundImage = `url('${imagePath}')`;
    }
}
exports.setImage = setImage;
function loadImage(imagePath) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = imagePath;
        img.onload = () => resolve(imagePath);
        img.onerror = err => reject(err);
    });
}
exports.loadImage = loadImage;
function isImageElement(element) {
    return element.nodeName.toLowerCase() === 'img';
}
exports.isImageElement = isImageElement;
function addCssClassName(element, cssClassName) {
    if (!element.className.includes(cssClassName)) {
        element.className += ` ${cssClassName}`;
    }
}
exports.addCssClassName = addCssClassName;
function registerImageToLazyLoad(element, metadata) {
    const options = metadata.options || defaultObserverOptions;
    let observerKey = observerKeys.find(oKey => oKey.root === options.root &&
        oKey.rootMargin === options.rootMargin &&
        oKey.threshold === options.threshold);
    if (!observerKey) {
        observerKey = options;
        observerKeys.push(observerKey);
    }
    let observer = observers.get(observerKey);
    if (!observer) {
        observer = createIntersectionObserver(observerKey);
        observers.set(observerKey, observer);
    }
    images.set(element, {
        observer,
        options: metadata
    });
    observer.observe(element);
}
exports.registerImageToLazyLoad = registerImageToLazyLoad;
//# sourceMappingURL=lazyload.js.map