vue-progressive-image
Advanced tools
Comparing version 4.0.0-beta.4 to 4.0.0-beta.5
@@ -1,2 +0,2 @@ | ||
import { ref, computed, isRef, onMounted, onUnmounted, watch, nextTick, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createElementVNode, withDirectives, vShow, createCommentVNode, createBlock, Transition, withCtx, renderSlot } from "vue"; | ||
import { ref, computed, isRef, nextTick, onMounted, onUnmounted, watch, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createElementVNode, withDirectives, vShow, createCommentVNode, createBlock, Transition, withCtx, renderSlot } from "vue"; | ||
var style = ""; | ||
@@ -6,4 +6,3 @@ const MAIN_IMAGE_LOAD_SUCCESS = "success"; | ||
const IMAGE_POLL_INTERVAL = 10; | ||
const IMAGE_BLUR = 20; | ||
const IMAGE_RENDERING_DELAY = 0; | ||
const IMAGE_BLUR = 40; | ||
const IMAGE_ASPECT_RATIO = 0.5625; | ||
@@ -13,12 +12,12 @@ const INTERSECTION_THRESHOLD = 0.2; | ||
const image = new Image(); | ||
const naturalWidth = ref(0); | ||
const naturalHeight = ref(0); | ||
const width = ref(0); | ||
const height = ref(0); | ||
const aspectRatio = computed(() => { | ||
return naturalWidth.value ? naturalHeight.value / naturalWidth.value : IMAGE_ASPECT_RATIO; | ||
return width.value ? height.value / width.value : IMAGE_ASPECT_RATIO; | ||
}); | ||
const pollImageData = setInterval(() => { | ||
if (image && image.naturalWidth) { | ||
if (image && image.width) { | ||
clearInterval(pollImageData); | ||
naturalWidth.value = image.naturalWidth; | ||
naturalHeight.value = image.naturalHeight; | ||
width.value = image.width; | ||
height.value = image.height; | ||
} | ||
@@ -46,3 +45,3 @@ }, IMAGE_POLL_INTERVAL); | ||
imageRenderer(imageNode); | ||
resolve(); | ||
nextTick(resolve); | ||
}; | ||
@@ -53,6 +52,5 @@ image.onerror = reject; | ||
return { | ||
image, | ||
width, | ||
height, | ||
aspectRatio, | ||
naturalWidth, | ||
naturalHeight, | ||
loadImage | ||
@@ -100,16 +98,7 @@ }; | ||
props: { | ||
src: { | ||
type: String, | ||
required: true | ||
}, | ||
placeholderSrc: { | ||
type: String | ||
}, | ||
fallbackSrc: { | ||
type: String | ||
}, | ||
delay: { | ||
type: [Number, String], | ||
default: IMAGE_RENDERING_DELAY | ||
}, | ||
src: String, | ||
placeholderSrc: String, | ||
fallbackSrc: String, | ||
alt: String, | ||
customClass: String, | ||
blur: { | ||
@@ -119,8 +108,6 @@ type: [Number, String], | ||
}, | ||
alt: { | ||
type: String | ||
delay: { | ||
type: [Number, String], | ||
default: 0 | ||
}, | ||
customClass: { | ||
type: String | ||
}, | ||
objectCover: { | ||
@@ -138,19 +125,26 @@ type: Boolean, | ||
const isFallbackImageRendered = ref(false); | ||
const { isIntersected, watchIntersectionOnce } = useIntersect(rootRef); | ||
const { loadImage, aspectRatio, width } = useImage(mainImageRef); | ||
const isLoading = computed(() => !isMainImageRendered.value); | ||
const { isIntersected, watchIntersectionOnce } = useIntersect(rootRef); | ||
const { loadImage, aspectRatio, naturalWidth } = useImage(mainImageRef); | ||
const paddingHack = computed(() => ({ | ||
paddingBottom: `${aspectRatio.value * 100}%` | ||
})); | ||
const placeholderStyle = computed(() => { | ||
const value = props.blur; | ||
return { | ||
top: `-${value}px`, | ||
left: `-${value}px`, | ||
width: `calc(100% + ${value * 2}px)`, | ||
height: `calc(100% + ${value * 2}px)`, | ||
filter: `blur(${value}px)` | ||
}; | ||
}); | ||
const componentStyle = computed(() => { | ||
if (props.objectCover) { | ||
if (props.objectCover || width.value === 0) { | ||
return; | ||
} | ||
return { | ||
maxWidth: naturalWidth.value ? `${naturalWidth.value}px` : "100%" | ||
maxWidth: `${width.value}px` | ||
}; | ||
}); | ||
const placeholderStyle = computed(() => ({ | ||
filter: `blur(${props.blur * 1}px)` | ||
})); | ||
const imageClasses = computed(() => { | ||
@@ -177,3 +171,5 @@ return [ | ||
onMounted(() => { | ||
watchIntersectionOnce(onComponentIntersected); | ||
if (props.src) { | ||
watchIntersectionOnce(onComponentIntersected); | ||
} | ||
}); | ||
@@ -192,5 +188,5 @@ return (_ctx, _cache) => { | ||
key: 0, | ||
class: "v-progressive-image-main", | ||
ref_key: "mainImageRef", | ||
ref: mainImageRef, | ||
class: "v-progressive-image-main", | ||
src: isFallbackImageRendered.value ? __props.fallbackSrc : __props.src, | ||
@@ -203,6 +199,4 @@ alt: __props.alt | ||
key: 1, | ||
appear: "", | ||
"leave-class": "v-progressive-image-fade-leave", | ||
"leave-to-class": "v-progressive-image-fade-leave-to", | ||
"leave-active-class": "v-progressive-image-fade-leave-active" | ||
name: "v-progressive-image-fade", | ||
appear: "" | ||
}, { | ||
@@ -212,4 +206,4 @@ default: withCtx(() => [ | ||
key: 0, | ||
class: "v-progressive-image-placeholder", | ||
loading: "lazy", | ||
class: "v-progressive-image-placeholder", | ||
style: normalizeStyle(unref(placeholderStyle)), | ||
@@ -216,0 +210,0 @@ src: __props.placeholderSrc |
@@ -1,1 +0,1 @@ | ||
(function(c,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis!="undefined"?globalThis:c||self,e(c.VueProgressiveImage={},c.Vue))})(this,function(c,e){"use strict";var M="";const p="success",I="error",S=o=>{const t=new Image,r=e.ref(0),s=e.ref(0),i=e.computed(()=>r.value?s.value/r.value:.5625),n=setInterval(()=>{t&&t.naturalWidth&&(clearInterval(n),r.value=t.naturalWidth,s.value=t.naturalHeight)},10),d=l=>{const a=document.createElement("canvas");a.setAttribute("hidden",!0),a.setAttribute("data-src",l.src),a.width=1,a.height=1,document.body.appendChild(a),a.getContext("2d").drawImage(l,0,0),document.body.removeChild(a)};return{image:t,aspectRatio:i,naturalWidth:r,naturalHeight:s,loadImage:()=>{const l=e.isRef(o)?o.value:o,a=l.src;return t.src=a,t.complete?Promise.resolve():new Promise((u,g)=>{t.onload=()=>{d(l),u()},t.onerror=g})}}};var R=o=>{const t=e.ref(!1),r={threshold:.2},s=new IntersectionObserver(n=>{n[0].isIntersecting&&(t.value=!0,s.disconnect())},r),i=n=>{const d=e.watch(t,m=>{m&&(e.nextTick().then(n),d())},{immediate:!0})};return e.onMounted(()=>{const n=e.isRef(o)?o.value:o;s.observe(n)}),e.onUnmounted(()=>{s.disconnect()}),{watchIntersectionOnce:i,isIntersected:t}};const _=["src","alt"],A=["src"],b={key:2,class:"v-progressive-image-slot-default"},f={props:{src:{type:String,required:!0},placeholderSrc:{type:String},fallbackSrc:{type:String},delay:{type:[Number,String],default:0},blur:{type:[Number,String],default:20},alt:{type:String},customClass:{type:String},objectCover:{type:Boolean,default:!1}},emits:[p,I],setup(o,{emit:t}){const r=o,s=e.ref(null),i=e.ref(null),n=e.ref(!1),d=e.ref(!1),m=e.computed(()=>!n.value),{isIntersected:l,watchIntersectionOnce:a}=R(s),{loadImage:u,aspectRatio:g,naturalWidth:E}=S(i),C=e.computed(()=>({paddingBottom:`${g.value*100}%`})),k=e.computed(()=>{if(!r.objectCover)return{maxWidth:E.value?`${E.value}px`:"100%"}}),N=e.computed(()=>({filter:`blur(${r.blur*1}px)`})),v=e.computed(()=>[r.customClass,{"v-progressive-image-object-cover":r.objectCover}]),T=()=>{u().then(()=>{setTimeout(()=>{n.value=!0,t(p)},r.delay*1)}).catch(()=>{n.value=!0,d.value=!0,t(I,error)})};return e.onMounted(()=>{a(T)}),(y,D)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"rootRef",ref:s,class:e.normalizeClass(["v-progressive-image",e.unref(v)]),style:e.normalizeStyle(e.unref(k))},[e.createElementVNode("div",{style:e.normalizeStyle(e.unref(C))},[e.unref(l)?e.withDirectives((e.openBlock(),e.createElementBlock("img",{key:0,class:"v-progressive-image-main",ref_key:"mainImageRef",ref:i,src:d.value?o.fallbackSrc:o.src,alt:o.alt},null,8,_)),[[e.vShow,n.value]]):e.createCommentVNode("",!0),o.placeholderSrc?(e.openBlock(),e.createBlock(e.Transition,{key:1,appear:"","leave-class":"v-progressive-image-fade-leave","leave-to-class":"v-progressive-image-fade-leave-to","leave-active-class":"v-progressive-image-fade-leave-active"},{default:e.withCtx(()=>[e.unref(m)?(e.openBlock(),e.createElementBlock("img",{key:0,loading:"lazy",class:"v-progressive-image-placeholder",style:e.normalizeStyle(e.unref(N)),src:o.placeholderSrc},null,12,A)):e.createCommentVNode("",!0)]),_:1})):e.createCommentVNode("",!0),y.$slots.default?(e.openBlock(),e.createElementBlock("div",b,[e.renderSlot(y.$slots,"default",{isLoading:e.unref(m)})])):e.createCommentVNode("",!0)],4)],6))}},h=(o,t={})=>{Object.keys(t).forEach(r=>{f.props[r].default=t[r]}),o.component("ProgressiveImage",f)};c.ProgressiveImage=f,c.default=h,c.install=h,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); | ||
(function(a,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis!="undefined"?globalThis:a||self,e(a.VueProgressiveImage={},a.Vue))})(this,function(a,e){"use strict";var M="";const h="success",I="error",y=o=>{const t=new Image,n=e.ref(0),c=e.ref(0),d=e.computed(()=>n.value?c.value/n.value:.5625),r=setInterval(()=>{t&&t.width&&(clearInterval(r),n.value=t.width,c.value=t.height)},10),m=i=>{const s=document.createElement("canvas");s.setAttribute("hidden",!0),s.setAttribute("data-src",i.src),s.width=1,s.height=1,document.body.appendChild(s),s.getContext("2d").drawImage(i,0,0),document.body.removeChild(s)};return{width:n,height:c,aspectRatio:d,loadImage:()=>{const i=e.isRef(o)?o.value:o,s=i.src;return t.src=s,t.complete?Promise.resolve():new Promise((p,g)=>{t.onload=()=>{m(i),e.nextTick(p)},t.onerror=g})}}};var R=o=>{const t=e.ref(!1),n={threshold:.2},c=new IntersectionObserver(r=>{r[0].isIntersecting&&(t.value=!0,c.disconnect())},n),d=r=>{const m=e.watch(t,f=>{f&&(e.nextTick().then(r),m())},{immediate:!0})};return e.onMounted(()=>{const r=e.isRef(o)?o.value:o;c.observe(r)}),e.onUnmounted(()=>{c.disconnect()}),{watchIntersectionOnce:d,isIntersected:t}};const b=["src","alt"],k=["src"],C={key:2,class:"v-progressive-image-slot-default"},u={props:{src:String,placeholderSrc:String,fallbackSrc:String,alt:String,customClass:String,blur:{type:[Number,String],default:40},delay:{type:[Number,String],default:0},objectCover:{type:Boolean,default:!1}},emits:[h,I],setup(o,{emit:t}){const n=o,c=e.ref(null),d=e.ref(null),r=e.ref(!1),m=e.ref(!1),{isIntersected:f,watchIntersectionOnce:i}=R(c),{loadImage:s,aspectRatio:p,width:g}=y(d),E=e.computed(()=>!r.value),_=e.computed(()=>({paddingBottom:`${p.value*100}%`})),A=e.computed(()=>{const l=n.blur;return{top:`-${l}px`,left:`-${l}px`,width:`calc(100% + ${l*2}px)`,height:`calc(100% + ${l*2}px)`,filter:`blur(${l}px)`}}),T=e.computed(()=>{if(!(n.objectCover||g.value===0))return{maxWidth:`${g.value}px`}}),w=e.computed(()=>[n.customClass,{"v-progressive-image-object-cover":n.objectCover}]),O=()=>{s().then(()=>{setTimeout(()=>{r.value=!0,t(h)},n.delay*1)}).catch(()=>{r.value=!0,m.value=!0,t(I,error)})};return e.onMounted(()=>{n.src&&i(O)}),(l,P)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"rootRef",ref:c,class:e.normalizeClass(["v-progressive-image",e.unref(w)]),style:e.normalizeStyle(e.unref(T))},[e.createElementVNode("div",{style:e.normalizeStyle(e.unref(_))},[e.unref(f)?e.withDirectives((e.openBlock(),e.createElementBlock("img",{key:0,ref_key:"mainImageRef",ref:d,class:"v-progressive-image-main",src:m.value?o.fallbackSrc:o.src,alt:o.alt},null,8,b)),[[e.vShow,r.value]]):e.createCommentVNode("",!0),o.placeholderSrc?(e.openBlock(),e.createBlock(e.Transition,{key:1,name:"v-progressive-image-fade",appear:""},{default:e.withCtx(()=>[e.unref(E)?(e.openBlock(),e.createElementBlock("img",{key:0,class:"v-progressive-image-placeholder",loading:"lazy",style:e.normalizeStyle(e.unref(A)),src:o.placeholderSrc},null,12,k)):e.createCommentVNode("",!0)]),_:1})):e.createCommentVNode("",!0),l.$slots.default?(e.openBlock(),e.createElementBlock("div",C,[e.renderSlot(l.$slots,"default",{isLoading:e.unref(E)})])):e.createCommentVNode("",!0)],4)],6))}},S=(o,t={})=>{Object.keys(t).forEach(n=>{u.props[n].default=t[n]}),o.component("ProgressiveImage",u)};a.ProgressiveImage=u,a.default=S,a.install=S,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); |
{ | ||
"name": "vue-progressive-image", | ||
"version": "4.0.0-beta.4", | ||
"version": "4.0.0-beta.5", | ||
"description": "Vue progressive image loading plugin", | ||
@@ -5,0 +5,0 @@ "main": "./dist/vue-progressive-image.umd.js", |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
18981
236