magic-img
Version:
2 lines (1 loc) • 2.52 kB
JavaScript
(function(i,o){typeof exports=="object"&&typeof module<"u"?module.exports=o():typeof define=="function"&&define.amd?define(o):(i=typeof globalThis<"u"?globalThis:i||self,i.MagicImage=o())})(this,function(){"use strict";const i=["lqip","blurhash"];function o(e,t,s,h,c,l,u,S){var a=typeof e=="function"?e.options:e;t&&(a.render=t,a.staticRenderFns=s,a._compiled=!0),h&&(a.functional=!0),l&&(a._scopeId="data-v-"+l);var n;if(u?(n=function(r){r=r||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!r&&typeof __VUE_SSR_CONTEXT__<"u"&&(r=__VUE_SSR_CONTEXT__),c&&c.call(this,r),r&&r._registeredComponents&&r._registeredComponents.add(u)},a._ssrRegister=n):c&&(n=S?function(){c.call(this,(a.functional?this.parent:this).$root.$options.shadowRoot)}:c),n)if(a.functional){a._injectStyles=n;var w=a.render;a.render=function(C,m){return n.call(m),w(C,m)}}else{var f=a.beforeCreate;a.beforeCreate=f?[].concat(f,n):[n]}return{exports:e,options:a}}const g={name:"MagicImg",props:{src:{required:!0,type:String,default:""}},computed:{data({src:e}){try{return JSON.parse(e)}catch{return{}}}},data(){return{imgPlaceholder:i,placeholderStatus:"",targetStatus:"",realSrc:""}},mounted(){this.setObserver()},watch:{src(){this.start()}},methods:{setObserver(){const e=new IntersectionObserver(async t=>{for(const{isIntersecting:s}of t)s&&(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(),s=new Image;s.onload=()=>requestAnimationFrame(()=>{const h=performance.now()-t>100?"to":"noPrevice";this.realSrc=e.src,this.placeholderStatus=h,this.targetStatus=h}),s.src=e.src}}};var p=function(){var t=this,s=t._self._c;return s("div",{ref:"magicImage",attrs:{"magic-img":"",magic:t.data.magic}},[t.imgPlaceholder.includes(t.data.magic)?s("img",{staticClass:"magic-placeholder",attrs:{status:t.placeholderStatus,src:t.data.content,width:t.data.width,height:t.data.height,alt:""}}):s("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)}}),s("img",{staticClass:"magic-target",attrs:{status:t.targetStatus,src:t.realSrc,alt:""}})])},_=[],v=o(g,p,_,!1,null,null,null,null);const d=v.exports;return d.install=e=>e.component(d.name,d),d});