t-fighting-design/es/_utils/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

var n = Object.defineProperty;
var l = (e, s, r) => s in e ? n(e, s, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[s] = r;
var t = (e, s, r) => (l(e, typeof s != "symbol" ? s + "" : s, r), r);
import { isString as c } from "./index3.js";
class i {
  constructor(s, r, o) {
    t(this, "node");
    t(this, "props");
    t(this, "callback");
    t(this, "loadCreateImg", (s) => {
      const r = new Image();
      s ? r.src = s : r.src = this.props.src, r.addEventListener("error", (o) => {
        this.onerror(o);
      }), r.addEventListener("load", (o) => {
        this.onload(o, r.src);
      });
    });
    t(this, "onerror", (s) => {
      if (this.props.errSrc) {
        this.loadCreateImg(this.props.errSrc), this.props.errSrc = "";
        return;
      }
      this.props.error && this.props.error(s), this.callback && this.callback(!1);
    });
    t(this, "onload", (s, r) => {
      this.node.src = r, this.props.load && this.props.load(s), this.callback && this.callback(!0);
    });
    this.node = s, this.props = r, this.callback = o;
  }
}
class h extends i {
  constructor(r, o, a) {
    super(r, o, a);
    t(this, "observer", () => {
      const r = new IntersectionObserver(
        (o) => {
          o[0].isIntersecting && (this.loadCreateImg(), r.unobserve(this.node));
        },
        {
          rootMargin: c(this.props.rootMargin) ? this.props.rootMargin : this.props.rootMargin + "px"
        }
      );
      return r;
    });
    t(this, "lazyCreateImg", () => {
      this.observer().observe(this.node);
    });
  }
}
const g = (e, s, r) => s.lazy ? new h(e, s, r).lazyCreateImg() : new i(e, s, r).loadCreateImg();
export {
  g as loadImage
};