magic-img/dist/vue3.mjs

让你的图片加载更加优雅

import { openBlock as i, createElementBlock as n, createElementVNode as o } from "vue";
const d = ["lqip", "blurhash"], l = (t, r) => {
  const a = t.__vccOpts || t;
  for (const [c, s] of r)
    a[c] = s;
  return a;
}, g = {
  name: "MagicImg",
  props: {
    src: {
      required: !0,
      type: String,
      default: ""
    }
  },
  computed: {
    data({ src: t }) {
      try {
        return JSON.parse(t);
      } catch {
        return {};
      }
    }
  },
  data() {
    return {
      imgPlaceholder: d,
      placeholderStatus: "",
      targetStatus: "",
      realSrc: ""
    };
  },
  mounted() {
    this.setObserver();
  },
  watch: {
    src() {
      this.start();
    }
  },
  methods: {
    setObserver() {
      const t = new IntersectionObserver(async (r) => {
        for (const { isIntersecting: a } of r)
          a && (this.start(), t.unobserve(this.$refs.magicImage), t.disconnect());
      });
      t.observe(this.$refs.magicImage);
    },
    start() {
      const { data: t } = this;
      this.placeholderStatus = "from", this.targetStatus = "from";
      const r = performance.now(), a = new Image();
      a.onload = () => requestAnimationFrame(() => {
        const c = performance.now() - r > 100 ? "to" : "noPrevice";
        this.realSrc = t.src, this.placeholderStatus = c, this.targetStatus = c;
      }), a.src = t.src;
    }
  }
}, m = ["magic"], u = ["status", "innerHTML", "width", "height", "viewBox"], _ = ["status", "src", "width", "height"], f = ["status", "src"];
function p(t, r, a, c, s, e) {
  return i(), n("div", {
    ref: "magicImage",
    "magic-img": "",
    magic: e.data.magic
  }, [
    s.imgPlaceholder.includes(e.data.magic) ? (i(), n("img", {
      key: 1,
      class: "magic-placeholder",
      status: s.placeholderStatus,
      src: e.data.content,
      width: e.data.width,
      height: e.data.height,
      alt: ""
    }, null, 8, _)) : (i(), n("svg", {
      key: 0,
      class: "magic-placeholder",
      status: s.placeholderStatus,
      preserveAspectRatio: "none",
      innerHTML: e.data.content,
      width: e.data.width,
      height: e.data.height,
      viewBox: `0 0 ${e.data.width_ || e.data.width} ${e.data.height_ || e.data.height}`
    }, null, 8, u)),
    o("img", {
      class: "magic-target",
      status: s.targetStatus,
      src: s.realSrc,
      alt: ""
    }, null, 8, f)
  ], 8, m);
}
const h = /* @__PURE__ */ l(g, [["render", p]]);
h.install = (t) => t.component(h.name, h);
export {
  h as default
};