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

Stencil Component Starter

import { r as registerInstance, h, g as getElement } from './index-a9700b09.js';

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

class RadhLazyImg {
    constructor(hostRef) {
        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 h("img", { "data-src": this.imgSrc, src: "assets/imgs/dummy-off.png" });
    }
    get el() { return getElement(this); }
}
RadhLazyImg.style = radhLazyImgCss;

export { RadhLazyImg as radh_lazy_img };