radh-ui/dist/collection/components/radh-lazy-img/radh-lazy-img.js

Stencil Component Starter

import { Component, Element, h, Prop } from '@stencil/core';
export class RadhLazyImg {
    constructor() {
        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" });
    }
    static get is() { return "radh-lazy-img"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["radh-lazy-img.css"]
    }; }
    static get styleUrls() { return {
        "$": ["radh-lazy-img.css"]
    }; }
    static get properties() { return {
        "imgSrc": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "img-src",
            "reflect": false
        },
        "time": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "time",
            "reflect": false
        }
    }; }
    static get elementRef() { return "el"; }
}