Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-progressive-image

Package Overview
Dependencies
Maintainers
1
Versions
54
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-progressive-image - npm Package Compare versions

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

86

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

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc