vue-progressive-image - npm Package Compare versions

Comparing version 4.0.0-beta.4 to 4.0.0-beta.5

dist/vue-progressive-image.es.js

@@ -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

dist/vue-progressive-image.umd.js

@@ -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"}})});

package.json

 {
   "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",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

18981

decreased by-1.18%

Lines of code

236

decreased by-2.88%

No dependency changes