magic-img
Version:
102 lines (101 loc) • 3.15 kB
JavaScript
const _ = ["lqip", "blurhash"];
function p(e, t, r, o, i, d, h, m) {
var a = typeof e == "function" ? e.options : e;
t && (a.render = t, a.staticRenderFns = r, a._compiled = !0), o && (a.functional = !0), d && (a._scopeId = "data-v-" + d);
var n;
if (h ? (n = function(s) {
s = s || // cached call
this.$vnode && this.$vnode.ssrContext || // stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !s && typeof __VUE_SSR_CONTEXT__ < "u" && (s = __VUE_SSR_CONTEXT__), i && i.call(this, s), s && s._registeredComponents && s._registeredComponents.add(h);
}, a._ssrRegister = n) : i && (n = m ? function() {
i.call(
this,
(a.functional ? this.parent : this).$root.$options.shadowRoot
);
} : i), n)
if (a.functional) {
a._injectStyles = n;
var f = a.render;
a.render = function(g, u) {
return n.call(u), f(g, u);
};
} else {
var l = a.beforeCreate;
a.beforeCreate = l ? [].concat(l, n) : [n];
}
return {
exports: e,
options: a
};
}
const v = {
name: "MagicImg",
props: {
src: {
required: !0,
type: String,
default: ""
}
},
computed: {
data({ src: e }) {
try {
return JSON.parse(e);
} catch {
return {};
}
}
},
data() {
return {
imgPlaceholder: _,
placeholderStatus: "",
targetStatus: "",
realSrc: ""
};
},
mounted() {
this.setObserver();
},
watch: {
src() {
this.start();
}
},
methods: {
setObserver() {
const e = new IntersectionObserver(async (t) => {
for (const { isIntersecting: r } of t)
r && (this.start(), e.unobserve(this.$refs.magicImage), e.disconnect());
});
e.observe(this.$refs.magicImage);
},
start() {
const { data: e } = this;
this.placeholderStatus = "from", this.targetStatus = "from";
const t = performance.now(), r = new Image();
r.onload = () => requestAnimationFrame(() => {
const o = performance.now() - t > 100 ? "to" : "noPrevice";
this.realSrc = e.src, this.placeholderStatus = o, this.targetStatus = o;
}), r.src = e.src;
}
}
};
var S = function() {
var t = this, r = t._self._c;
return r("div", { ref: "magicImage", attrs: { "magic-img": "", magic: t.data.magic } }, [t.imgPlaceholder.includes(t.data.magic) ? r("img", { staticClass: "magic-placeholder", attrs: { status: t.placeholderStatus, src: t.data.content, width: t.data.width, height: t.data.height, alt: "" } }) : r("svg", { staticClass: "magic-placeholder", attrs: { status: t.placeholderStatus, preserveAspectRatio: "none", width: t.data.width, height: t.data.height, viewBox: `0 0 ${t.data.width_ || t.data.width} ${t.data.height_ || t.data.height}` }, domProps: { innerHTML: t._s(t.data.content) } }), r("img", { staticClass: "magic-target", attrs: { status: t.targetStatus, src: t.realSrc, alt: "" } })]);
}, w = [], C = /* @__PURE__ */ p(
v,
S,
w,
!1,
null,
null,
null,
null
);
const c = C.exports;
c.install = (e) => e.component(c.name, c);
export {
c as default
};