ignite-html-lazyload/ignite-html-lazyload.js

import { IgniteProperty } from "../ignite-html/ignite-html.js";
import { IgniteTemplate } from "../ignite-html/ignite-template.js";

/**
 * Lazy loads an image in the src attribute for this element.
 * @param {string|Function|IgniteProperty} placeholder The palceholder image to use before the image is loaded. If null, a default one will be used.
 * @returns {IgniteTemplate} This ignite template.
 */
IgniteTemplate.prototype.lazy = function (placeholder = null) {
    //See if we have a src attribute already defined.
    if (this._attributes["src"]) {
        //Save the original source.
        this._lazy_src = this._attributes["src"];

        //If we have a placeholder set it
        if (placeholder) {
            if (placeholder instanceof IgniteProperty) {
                this._attributes["src"] = placeholder.value;
            } else if (placeholder instanceof Function) {
                this._attributes["src"] = placeholder();
            } else {
                this._attributes["src"] = placeholder;
            }
        } else {
            //Use default transparent empty png if no placeholder.
            this._attributes["src"] = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
        }

        //Add an intersect event to this template.
        this.onIntersect(() => {
            if (this._lazy_src) {
                this._attributes["src"] = this._lazy_src;
                this.element.setAttribute("src", this._lazy_src);
                this._lazy_src = null;
            }
        });
    }

    return this;
};