radh-ui/dist/cjs/radh-lazy-img.cjs.entry.js

Stencil Component Starter

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-710e648a.js');

const radhLazyImgCss = "img{max-width:100%}";

class RadhLazyImg {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.onIntersection = async (entries) => {
            for (const entry of entries) {
                if (entry.isIntersecting) {
                    if (this.observer) {
                        this.observer.disconnect();
                    }
                    if (entry.target.getAttribute('data-src')) {
                        console.log(entry.target.getAttribute('data-src'));
                        entry.target.setAttribute('src', entry.target.getAttribute('data-src'));
                        entry.target.removeAttribute('data-src');
                    }
                }
            }
        };
    }
    async componentDidLoad() {
        const img = this.el.shadowRoot.querySelector('img');
        if (!this.time) {
            this.time = 0;
        }
        if (img) {
            setTimeout(() => {
                this.observer = new IntersectionObserver(this.onIntersection, { rootMargin: '100px 0px' });
                this.observer.observe(img);
            }, this.time);
        }
    }
    render() {
        return index.h("img", { "data-src": this.imgSrc, src: "assets/imgs/dummy-off.png" });
    }
    get el() { return index.getElement(this); }
}
RadhLazyImg.style = radhLazyImgCss;

exports.radh_lazy_img = RadhLazyImg;