magic-img
Version:
2 lines (1 loc) • 2.04 kB
JavaScript
(function(e,n){typeof exports=="object"&&typeof module<"u"?module.exports=n(require("vue")):typeof define=="function"&&define.amd?define(["vue"],n):(e=typeof globalThis<"u"?globalThis:e||self,e.MagicImage=n(e.Vue))})(this,function(e){"use strict";const n=["lqip","blurhash"],h=(t,c)=>{const s=t.__vccOpts||t;for(const[i,r]of c)s[i]=r;return s},d={name:"MagicImg",props:{src:{required:!0,type:String,default:""}},computed:{data({src:t}){try{return JSON.parse(t)}catch{return{}}}},data(){return{imgPlaceholder:n,placeholderStatus:"",targetStatus:"",realSrc:""}},mounted(){this.setObserver()},watch:{src(){this.start()}},methods:{setObserver(){const t=new IntersectionObserver(async c=>{for(const{isIntersecting:s}of c)s&&(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 c=performance.now(),s=new Image;s.onload=()=>requestAnimationFrame(()=>{const i=performance.now()-c>100?"to":"noPrevice";this.realSrc=t.src,this.placeholderStatus=i,this.targetStatus=i}),s.src=t.src}}},l=["magic"],m=["status","innerHTML","width","height","viewBox"],g=["status","src","width","height"],u=["status","src"];function f(t,c,s,i,r,a){return e.openBlock(),e.createElementBlock("div",{ref:"magicImage","magic-img":"",magic:a.data.magic},[r.imgPlaceholder.includes(a.data.magic)?(e.openBlock(),e.createElementBlock("img",{key:1,class:"magic-placeholder",status:r.placeholderStatus,src:a.data.content,width:a.data.width,height:a.data.height,alt:""},null,8,g)):(e.openBlock(),e.createElementBlock("svg",{key:0,class:"magic-placeholder",status:r.placeholderStatus,preserveAspectRatio:"none",innerHTML:a.data.content,width:a.data.width,height:a.data.height,viewBox:`0 0 ${a.data.width_||a.data.width} ${a.data.height_||a.data.height}`},null,8,m)),e.createElementVNode("img",{class:"magic-target",status:r.targetStatus,src:r.realSrc,alt:""},null,8,u)],8,l)}const o=h(d,[["render",f]]);return o.install=t=>t.component(o.name,o),o});