vue-progressive-image - npm Package Compare versions

Comparing version 3.2.1 to 3.2.2

dist/vue-progressive-image.es.js

@@ -1,219 +0,235 @@
-import { ref, computed, isRef, nextTick, watch, onMounted, onUnmounted, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createElementVNode, createVNode, Transition, withCtx, withDirectives, vShow, createCommentVNode, createBlock, renderSlot } from "vue";
-var style = "";
-const MAIN_IMAGE_LOAD_SUCCESS = "success";
-const MAIN_IMAGE_LOAD_ERROR = "error";
-const IMAGE_POLL_INTERVAL = 10;
-const IMAGE_ASPECT_RATIO = 0.5625;
-const INTERSECTION_THRESHOLD = 0.2;
-const useImage = (element) => {
-  const image = new Image();
-  const width = ref(0);
-  const height = ref(0);
-  const aspectRatio = computed(() => {
-    return width.value ? height.value / width.value : IMAGE_ASPECT_RATIO;
-  });
-  const pollImageData = setInterval(() => {
-    if (image && image.width) {
-      clearInterval(pollImageData);
-      width.value = image.width;
-      height.value = image.height;
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".progressive-image{position:relative;overflow:hidden;width:100%;display:inline-block}.progressive-image-canvas{visibility:hidden;position:absolute;top:0;left:0}.progressive-image-main{position:absolute;top:0px;left:0px;width:100%;height:auto;z-index:1;transition-duration:.3s;transition-property:all;transition-timing-function:ease-out;transform:translateZ(0)}.progressive-image-before-enter{opacity:1}.progressive-image-enter{opacity:0}.progressive-image-placeholder{position:absolute;top:0px;left:0px;z-index:0;overflow:hidden;transition-duration:.3s;transition-property:all;transition-timing-function:ease-out;backface-visibility:hidden;transform:translateZ(0) scale(1.1);width:100%;height:100%;background-size:cover}.progressive-image-placeholder-out{transition-duration:inherit;transition-property:all;transition-timing-function:ease-out;transition-delay:.4s;opacity:0}.progressive-background{position:relative;width:100%;height:100%;overflow:hidden}.progressive-background-slot{position:relative;z-index:1}.progressive-background-canvas{visibility:hidden;position:absolute;top:0;left:0}.progressive-background-image{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;transition:all .4s ease-out;background-position:center;background-repeat:no-repeat;background-size:cover}.progressive-background-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;transition:all .4s ease-out;background-position:center;background-repeat:no-repeat;background-size:cover;transform:scale(1.1);z-index:0}.progressive-background-before{opacity:1}.progressive-background-enter{opacity:0}.progressive-image-loader{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;display:flex;align-items:center;justify-content:center}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();const h = function(t) {
+  return typeof t < "u" && t !== null;
+}, p = {
+  props: {
+    src: { type: null, required: !0 },
+    placeholder: { type: String },
+    blur: { type: Number },
+    aspectRatio: { type: Number },
+    noRatio: { type: Boolean },
+    fallback: { type: String },
+    alt: { type: String },
+    customClass: { type: String }
+  },
+  data() {
+    return {
+      isRendered: !1,
+      options: { cache: !0 },
+      defaultBlur: 20,
+      image: null,
+      originalWidth: 0,
+      placeholderImage: null,
+      aspectRatioDetect: 0.5625,
+      isPollingKilled: !1,
+      isImageCached: !1,
+      imageError: !1
+    };
+  },
+  watch: {
+    src() {
+      this.handleImageLoading();
     }
-  }, IMAGE_POLL_INTERVAL);
-  const imageRenderer = (imageNode) => {
-    const canvas = document.createElement("canvas");
-    canvas.width = 1;
-    canvas.height = 1;
-    canvas.setAttribute("hidden", true);
-    document.body.appendChild(canvas);
-    canvas.getContext("2d").drawImage(imageNode, 0, 0);
-    document.body.removeChild(canvas);
-  };
-  const loadImage = () => {
-    const imageNode = isRef(element) ? element.value : element;
-    const src = imageNode.src;
-    image.src = src;
-    if (image.complete) {
-      return Promise.resolve();
+  },
+  computed: {
+    shouldPlaceholderRender() {
+      return !!this.placeholderImage;
+    },
+    shouldImageRender() {
+      return this.isRendered;
+    },
+    cached() {
+      return this.options.cache && this.isImageCached;
+    },
+    calculatedRatio() {
+      return this.aspectRatio || this.aspectRatioDetect;
+    },
+    wrapperStyle() {
+      return this.noRatio ? {} : {
+        paddingBottom: `${this.calculatedRatio * 100}%`
+      };
+    },
+    componentStyle() {
+      return {
+        maxWidth: this.originalWidth === 0 ? "100%" : `${this.originalWidth}px`
+      };
+    },
+    blurStyle() {
+      let t = this.defaultBlur;
+      return h(this.blur) ? this.getBlurStyle(this.blur) : h(this.options.blur) ? this.getBlurStyle(this.options.blur) : this.getBlurStyle(t);
     }
-    return new Promise((resolve, reject) => {
-      image.onload = () => {
-        imageRenderer(imageNode);
-        nextTick(resolve);
+  },
+  mounted() {
+    this.handleImageLoading();
+  },
+  methods: {
+    getBlurStyle(t) {
+      if (t !== 0)
+        return {
+          filter: `blur(${t}px)`
+        };
+    },
+    defineAspectRatio(t) {
+      const e = this.options.timeout || 2500, s = this.options.pollInterval || 10, i = setInterval(() => {
+        if (!t.naturalWidth)
+          return;
+        clearInterval(i);
+        const { naturalHeight: a, naturalWidth: n } = t;
+        this.aspectRatioDetect = a / n, this.originalWidth = n;
+      }, s);
+      setTimeout(() => {
+        t.naturalWidth || (clearInterval(i), this.isPollingKilled = !0);
+      }, e);
+    },
+    isCached(t) {
+      const e = new Image();
+      return e.src = t, e.complete;
+    },
+    loadImage() {
+      const t = new Image(), e = this.options.delay || 0, s = this.fallback || this.options.fallback, i = this.imageError ? s : this.src;
+      this.options.cache && this.isCached(i) ? (this.image = i, this.placeholderImage = null, this.isImageCached = !0) : (this.image = null, this.isImageCached = !1, this.isRendered = !1), this.aspectRatio || this.defineAspectRatio(t), t.onload = () => {
+        if (this.image)
+          return;
+        this.isPollingKilled && !this.aspectRatio && this.defineAspectRatio(t), this.image = i;
+        let a;
+        try {
+          a = this.$refs.canvas.getContext("2d"), a.drawImage(this.$refs.main, 0, 0);
+        } catch {
+        }
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.isRendered = !0, this.placeholderImage = null;
+          }, e);
+        }), this.imageError = !1, this.$emit("onLoad", t.src);
+      }, t.onerror = (a) => {
+        this.$emit("onError", a), process.env.NODE_ENV !== "production" && !this.fallback && console.warn("[vue-progressive-image] An error occured during the image loading"), (this.fallback || this.options.fallback) && (this.imageError = !0, this.handleImageLoading());
+      }, t.src = i;
+    },
+    loadPlaceholder() {
+      if (!this.placeholder && !this.options.placeholder)
+        return;
+      const t = new Image(), e = this.placeholder || this.options.placeholder;
+      t.src = e, t.onload = () => {
+        this.placeholderImage = e, this.$emit("onLoadPlaceholder", e);
+      }, t.onerror = (s) => {
+        this.$emit("onPlaceholderError", s), process.env.NODE_ENV !== "production" && console.warn("[vue-progressive-image] An error occured during the placeholder image loading");
       };
-      image.onerror = reject;
-    });
-  };
-  return {
-    width,
-    height,
-    aspectRatio,
-    loadImage
-  };
+    },
+    handleImageLoading() {
+      this.loadPlaceholder(), this.loadImage();
+    }
+  }
 };
-const useIntersect = (element) => {
-  const isIntersected = ref(false);
-  const options = { threshold: INTERSECTION_THRESHOLD };
-  const observer = new IntersectionObserver((entries) => {
-    if (entries[0].isIntersecting) {
-      isIntersected.value = true;
-      observer.disconnect();
+function m(t, e, s, i, a, n, c, v) {
+  var r = typeof t == "function" ? t.options : t;
+  e && (r.render = e, r.staticRenderFns = s, r._compiled = !0), i && (r.functional = !0), n && (r._scopeId = "data-v-" + n);
+  var l;
+  if (c ? (l = function(o) {
+    o = o || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !o && typeof __VUE_SSR_CONTEXT__ < "u" && (o = __VUE_SSR_CONTEXT__), a && a.call(this, o), o && o._registeredComponents && o._registeredComponents.add(c);
+  }, r._ssrRegister = l) : a && (l = v ? function() {
+    a.call(
+      this,
+      (r.functional ? this.parent : this).$root.$options.shadowRoot
+    );
+  } : a), l)
+    if (r.functional) {
+      r._injectStyles = l;
+      var f = r.render;
+      r.render = function(_, g) {
+        return l.call(g), f(_, g);
+      };
+    } else {
+      var d = r.beforeCreate;
+      r.beforeCreate = d ? [].concat(d, l) : [l];
     }
-  }, options);
-  const watchIntersectionOnce = (callback) => {
-    const stop = watch(isIntersected, (is) => {
-      if (is) {
-        nextTick().then(callback);
-        stop();
-      }
-    }, { immediate: true });
-  };
-  onMounted(() => {
-    const el = isRef(element) ? element.value : element;
-    observer.observe(el);
-  });
-  onUnmounted(() => {
-    observer.disconnect();
-  });
   return {
-    watchIntersectionOnce,
-    isIntersected
+    exports: t,
+    options: r
   };
+}
+const y = {
+  name: "progressive-img",
+  props: {
+    imageCustomClass: { type: String }
+  },
+  mixins: [p],
+  computed: {
+    placeholderStyle() {
+      return {
+        ...this.blurStyle,
+        "background-image": `url(${this.placeholder || this.options.placeholder})`
+      };
+    }
+  }
 };
-const _hoisted_1 = ["src", "alt", "title"];
-const _hoisted_2 = ["loading", "src"];
-const _hoisted_3 = {
-  key: 1,
-  class: "v-progressive-image-slot-default"
-};
-const _sfc_main = {
+var b = function() {
+  var e = this, s = e._self._c;
+  return s("div", { ref: "image", class: ["progressive-image", e.customClass], style: e.componentStyle }, [e.$slots.loader && !e.shouldImageRender ? s("div", { staticClass: "progressive-image-loader" }, [e._t("loader")], 2) : e._e(), e.cached ? s("div", { staticClass: "progressive-image-wrapper", style: e.wrapperStyle }, [s("img", { class: ["progressive-image-main", e.imageCustomClass], attrs: { src: e.image, alt: e.alt } })]) : s("span", [e.shouldImageRender ? e._e() : s("canvas", { ref: "canvas", staticClass: "progressive-image-canvas", attrs: { width: "1", height: "1" } }), s("div", { staticClass: "progressive-image-wrapper", style: e.wrapperStyle }, [s("transition", { attrs: { "enter-class": "progressive-image-enter", "enter-active-class": "progressive-image-before-enter" } }, [s("img", { directives: [{ name: "show", rawName: "v-show", value: e.shouldImageRender, expression: "shouldImageRender" }], ref: "main", class: ["progressive-image-main", e.imageCustomClass], attrs: { src: e.image, alt: e.alt } })]), s("transition", { attrs: { "enter-class": "progressive-image-enter", "enter-active-class": "progressive-image-before-enter" } }, [e.shouldPlaceholderRender ? s("div", { staticClass: "progressive-image-placeholder", class: { "progressive-image-placeholder-out": e.shouldImageRender }, style: e.placeholderStyle }) : e._e()])], 1)])]);
+}, R = [], I = /* @__PURE__ */ m(
+  y,
+  b,
+  R,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const C = I.exports;
+const S = {
+  name: "progressive-background",
   props: {
-    src: String,
-    placeholderSrc: String,
-    fallbackSrc: String,
-    alt: String,
-    title: String,
-    customClass: String,
-    blur: [Number, String],
-    lazyPlaceholder: {
+    noRatio: {
       type: Boolean,
-      default: false
-    },
-    delay: {
-      type: [Number, String],
-      default: 0
-    },
-    objectCover: {
-      type: Boolean,
-      default: false
+      required: !1
     }
   },
-  emits: [MAIN_IMAGE_LOAD_SUCCESS, MAIN_IMAGE_LOAD_ERROR],
-  setup(__props, { emit }) {
-    const props = __props;
-    const rootRef = ref(null);
-    const imageRef = ref(null);
-    const isMainImageRendered = ref(false);
-    const isFallbackImageRendered = ref(false);
-    const { isIntersected, watchIntersectionOnce } = useIntersect(rootRef);
-    const { loadImage, aspectRatio, width } = useImage(imageRef);
-    const isLoading = computed(() => !isMainImageRendered.value);
-    const paddingHack = computed(() => ({
-      paddingBottom: `${aspectRatio.value * 100}%`
-    }));
-    const componentStyle = computed(() => {
-      if (props.objectCover || width.value === 0) {
-        return;
-      }
+  mixins: [p],
+  data() {
+    return {
+      applyRatio: !this.noRatio
+    };
+  },
+  computed: {
+    imageStyle() {
       return {
-        maxWidth: `${width.value}px`
+        backgroundImage: `url(${this.image})`
       };
-    });
-    const imageClasses = computed(() => {
-      return [
-        props.customClass,
-        {
-          "v-progressive-image-object-cover": props.objectCover,
-          "v-progressive-image-loading": isLoading.value
-        }
-      ];
-    });
-    const mainImageHandler = () => {
-      loadImage().then(() => {
-        setTimeout(() => {
-          isMainImageRendered.value = true;
-          emit(MAIN_IMAGE_LOAD_SUCCESS);
-        }, props.delay * 1);
-      }).catch((error) => {
-        isMainImageRendered.value = true;
-        isFallbackImageRendered.value = true;
-        emit(MAIN_IMAGE_LOAD_ERROR, error);
-      });
-    };
-    onMounted(() => {
-      if (props.placeholderSrc && props.blur) {
-        document.documentElement.style.setProperty("--progressive-image-blur", `${props.blur * 1}px`);
-      }
-      if (props.src) {
-        watchIntersectionOnce(mainImageHandler);
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "rootRef",
-        ref: rootRef,
-        class: normalizeClass(["v-progressive-image", unref(imageClasses)]),
-        style: normalizeStyle(unref(componentStyle))
-      }, [
-        createElementVNode("div", {
-          style: normalizeStyle(unref(paddingHack))
-        }, [
-          createVNode(Transition, {
-            css: !__props.placeholderSrc,
-            name: "v-progressive-image-main-fade",
-            appear: ""
-          }, {
-            default: withCtx(() => [
-              unref(isIntersected) ? withDirectives((openBlock(), createElementBlock("img", {
-                key: 0,
-                ref_key: "imageRef",
-                ref: imageRef,
-                class: "v-progressive-image-main",
-                src: isFallbackImageRendered.value ? __props.fallbackSrc : __props.src,
-                alt: __props.alt,
-                title: __props.title
-              }, null, 8, _hoisted_1)), [
-                [vShow, isMainImageRendered.value]
-              ]) : createCommentVNode("", true)
-            ]),
-            _: 1
-          }, 8, ["css"]),
-          __props.placeholderSrc ? (openBlock(), createBlock(Transition, {
-            key: 0,
-            name: "v-progressive-image-placeholder-fade",
-            appear: ""
-          }, {
-            default: withCtx(() => [
-              unref(isLoading) ? (openBlock(), createElementBlock("img", {
-                key: 0,
-                class: "v-progressive-image-placeholder",
-                loading: __props.lazyPlaceholder ? "lazy" : "eager",
-                src: __props.placeholderSrc
-              }, null, 8, _hoisted_2)) : createCommentVNode("", true)
-            ]),
-            _: 1
-          })) : createCommentVNode("", true),
-          _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_3, [
-            renderSlot(_ctx.$slots, "default", { isLoading: unref(isLoading) })
-          ])) : createCommentVNode("", true)
-        ], 4)
-      ], 6);
-    };
+    },
+    placeholderStyle() {
+      return {
+        ...this.blurStyle,
+        backgroundImage: `url(${this.placeholderImage})`
+      };
+    }
   }
 };
-const install = (app, props = {}) => {
-  Object.keys(props).forEach((key) => {
-    _sfc_main.props[key].default = props[key];
-  });
-  app.component("ProgressiveImage", _sfc_main);
+var k = function() {
+  var e = this, s = e._self._c;
+  return s("div", { class: ["progressive-background", e.customClass] }, [e.cached ? s("div", { style: e.wrapperStyle }, [s("div", { staticClass: "progressive-background-image", style: e.imageStyle }), s("div", { staticClass: "progressive-background-slot" }, [e._t("content")], 2)]) : s("span", [e.$slots.loader && !e.shouldImageRender ? s("div", { staticClass: "progressive-image-loader" }, [e._t("loader")], 2) : e._e(), e.shouldImageRender ? e._e() : s("div", [s("canvas", { ref: "canvas", staticClass: "progressive-background-canvas", attrs: { width: "1", height: "1" } }), s("img", { ref: "main", attrs: { src: e.image, hidden: "" } })]), s("div", { style: e.wrapperStyle }, [s("transition", { attrs: { "enter-class": "progressive-background-enter", "enter-active-class": "progressive-background-before" } }, [e.shouldImageRender ? s("div", { staticClass: "progressive-background-image", style: e.imageStyle }) : e._e()]), s("div", { staticClass: "progressive-background-slot" }, [e._t("content", null, { visible: !e.shouldImageRender })], 2), s("transition", { attrs: { "enter-class": "progressive-background-enter", "enter-active-class": "progressive-background-before" } }, [e.shouldPlaceholderRender ? s("div", { staticClass: "progressive-background-placeholder", style: e.placeholderStyle }) : e._e()])], 1)])]);
+}, $ = [], w = /* @__PURE__ */ m(
+  S,
+  k,
+  $,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const P = w.exports, u = function(t, e = {}) {
+  return {
+    ...t,
+    data: () => ({ options: e })
+  };
+}, E = function(t, e = {}) {
+  t.component("progressive-img", u(C, e)), t.component(
+    "progressive-background",
+    u(P, e)
+  );
 };
-export { _sfc_main as ProgressiveImage, install as default, install };
+export {
+  P as ProgressiveBackground,
+  C as ProgressiveImage,
+  E as default,
+  E as install
+};

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 O="";const I="success",S="error",E=t=>{const o=new Image,r=e.ref(0),a=e.ref(0),l=e.computed(()=>r.value?a.value/r.value:.5625),n=setInterval(()=>{o&&o.width&&(clearInterval(n),r.value=o.width,a.value=o.height)},10),i=d=>{const s=document.createElement("canvas");s.width=1,s.height=1,s.setAttribute("hidden",!0),document.body.appendChild(s),s.getContext("2d").drawImage(d,0,0),document.body.removeChild(s)};return{width:r,height:a,aspectRatio:l,loadImage:()=>{const d=e.isRef(t)?t.value:t,s=d.src;return o.src=s,o.complete?Promise.resolve():new Promise((h,g)=>{o.onload=()=>{i(d),e.nextTick(h)},o.onerror=g})}}},b=t=>{const o=e.ref(!1),r={threshold:.2},a=new IntersectionObserver(n=>{n[0].isIntersecting&&(o.value=!0,a.disconnect())},r),l=n=>{const i=e.watch(o,m=>{m&&(e.nextTick().then(n),i())},{immediate:!0})};return e.onMounted(()=>{const n=e.isRef(t)?t.value:t;a.observe(n)}),e.onUnmounted(()=>{a.disconnect()}),{watchIntersectionOnce:l,isIntersected:o}},k=["src","alt","title"],C=["loading","src"],R={key:1,class:"v-progressive-image-slot-default"},u={props:{src:String,placeholderSrc:String,fallbackSrc:String,alt:String,title:String,customClass:String,blur:[Number,String],lazyPlaceholder:{type:Boolean,default:!1},delay:{type:[Number,String],default:0},objectCover:{type:Boolean,default:!1}},emits:[I,S],setup(t,{emit:o}){const r=t,a=e.ref(null),l=e.ref(null),n=e.ref(!1),i=e.ref(!1),{isIntersected:m,watchIntersectionOnce:d}=b(a),{loadImage:s,aspectRatio:h,width:g}=E(l),p=e.computed(()=>!n.value),T=e.computed(()=>({paddingBottom:`${h.value*100}%`})),A=e.computed(()=>{if(!(r.objectCover||g.value===0))return{maxWidth:`${g.value}px`}}),N=e.computed(()=>[r.customClass,{"v-progressive-image-object-cover":r.objectCover,"v-progressive-image-loading":p.value}]),w=()=>{s().then(()=>{setTimeout(()=>{n.value=!0,o(I)},r.delay*1)}).catch(f=>{n.value=!0,i.value=!0,o(S,f)})};return e.onMounted(()=>{r.placeholderSrc&&r.blur&&document.documentElement.style.setProperty("--progressive-image-blur",`${r.blur*1}px`),r.src&&d(w)}),(f,P)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"rootRef",ref:a,class:e.normalizeClass(["v-progressive-image",e.unref(N)]),style:e.normalizeStyle(e.unref(A))},[e.createElementVNode("div",{style:e.normalizeStyle(e.unref(T))},[e.createVNode(e.Transition,{css:!t.placeholderSrc,name:"v-progressive-image-main-fade",appear:""},{default:e.withCtx(()=>[e.unref(m)?e.withDirectives((e.openBlock(),e.createElementBlock("img",{key:0,ref_key:"imageRef",ref:l,class:"v-progressive-image-main",src:i.value?t.fallbackSrc:t.src,alt:t.alt,title:t.title},null,8,k)),[[e.vShow,n.value]]):e.createCommentVNode("",!0)]),_:1},8,["css"]),t.placeholderSrc?(e.openBlock(),e.createBlock(e.Transition,{key:0,name:"v-progressive-image-placeholder-fade",appear:""},{default:e.withCtx(()=>[e.unref(p)?(e.openBlock(),e.createElementBlock("img",{key:0,class:"v-progressive-image-placeholder",loading:t.lazyPlaceholder?"lazy":"eager",src:t.placeholderSrc},null,8,C)):e.createCommentVNode("",!0)]),_:1})):e.createCommentVNode("",!0),f.$slots.default?(e.openBlock(),e.createElementBlock("div",R,[e.renderSlot(f.$slots,"default",{isLoading:e.unref(p)})])):e.createCommentVNode("",!0)],4)],6))}},y=(t,o={})=>{Object.keys(o).forEach(r=>{u.props[r].default=o[r]}),t.component("ProgressiveImage",u)};c.ProgressiveImage=u,c.default=y,c.install=y,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".progressive-image{position:relative;overflow:hidden;width:100%;display:inline-block}.progressive-image-canvas{visibility:hidden;position:absolute;top:0;left:0}.progressive-image-main{position:absolute;top:0px;left:0px;width:100%;height:auto;z-index:1;transition-duration:.3s;transition-property:all;transition-timing-function:ease-out;transform:translateZ(0)}.progressive-image-before-enter{opacity:1}.progressive-image-enter{opacity:0}.progressive-image-placeholder{position:absolute;top:0px;left:0px;z-index:0;overflow:hidden;transition-duration:.3s;transition-property:all;transition-timing-function:ease-out;backface-visibility:hidden;transform:translateZ(0) scale(1.1);width:100%;height:100%;background-size:cover}.progressive-image-placeholder-out{transition-duration:inherit;transition-property:all;transition-timing-function:ease-out;transition-delay:.4s;opacity:0}.progressive-background{position:relative;width:100%;height:100%;overflow:hidden}.progressive-background-slot{position:relative;z-index:1}.progressive-background-canvas{visibility:hidden;position:absolute;top:0;left:0}.progressive-background-image{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;transition:all .4s ease-out;background-position:center;background-repeat:no-repeat;background-size:cover}.progressive-background-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;transition:all .4s ease-out;background-position:center;background-repeat:no-repeat;background-size:cover;transform:scale(1.1);z-index:0}.progressive-background-before{opacity:1}.progressive-background-enter{opacity:0}.progressive-image-loader{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;display:flex;align-items:center;justify-content:center}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();(function(i,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(i=typeof globalThis<"u"?globalThis:i||self,c(i.VueProgressiveImage={}))})(this,function(i){"use strict";const c=function(t){return typeof t<"u"&&t!==null},g={props:{src:{type:null,required:!0},placeholder:{type:String},blur:{type:Number},aspectRatio:{type:Number},noRatio:{type:Boolean},fallback:{type:String},alt:{type:String},customClass:{type:String}},data(){return{isRendered:!1,options:{cache:!0},defaultBlur:20,image:null,originalWidth:0,placeholderImage:null,aspectRatioDetect:.5625,isPollingKilled:!1,isImageCached:!1,imageError:!1}},watch:{src(){this.handleImageLoading()}},computed:{shouldPlaceholderRender(){return!!this.placeholderImage},shouldImageRender(){return this.isRendered},cached(){return this.options.cache&&this.isImageCached},calculatedRatio(){return this.aspectRatio||this.aspectRatioDetect},wrapperStyle(){return this.noRatio?{}:{paddingBottom:`${this.calculatedRatio*100}%`}},componentStyle(){return{maxWidth:this.originalWidth===0?"100%":`${this.originalWidth}px`}},blurStyle(){let t=this.defaultBlur;return c(this.blur)?this.getBlurStyle(this.blur):c(this.options.blur)?this.getBlurStyle(this.options.blur):this.getBlurStyle(t)}},mounted(){this.handleImageLoading()},methods:{getBlurStyle(t){if(t!==0)return{filter:`blur(${t}px)`}},defineAspectRatio(t){const e=this.options.timeout||2500,s=this.options.pollInterval||10,o=setInterval(()=>{if(!t.naturalWidth)return;clearInterval(o);const{naturalHeight:a,naturalWidth:d}=t;this.aspectRatioDetect=a/d,this.originalWidth=d},s);setTimeout(()=>{t.naturalWidth||(clearInterval(o),this.isPollingKilled=!0)},e)},isCached(t){const e=new Image;return e.src=t,e.complete},loadImage(){const t=new Image,e=this.options.delay||0,s=this.fallback||this.options.fallback,o=this.imageError?s:this.src;this.options.cache&&this.isCached(o)?(this.image=o,this.placeholderImage=null,this.isImageCached=!0):(this.image=null,this.isImageCached=!1,this.isRendered=!1),this.aspectRatio||this.defineAspectRatio(t),t.onload=()=>{if(this.image)return;this.isPollingKilled&&!this.aspectRatio&&this.defineAspectRatio(t),this.image=o;let a;try{a=this.$refs.canvas.getContext("2d"),a.drawImage(this.$refs.main,0,0)}catch{}this.$nextTick(()=>{setTimeout(()=>{this.isRendered=!0,this.placeholderImage=null},e)}),this.imageError=!1,this.$emit("onLoad",t.src)},t.onerror=a=>{this.$emit("onError",a),process.env.NODE_ENV!=="production"&&!this.fallback&&console.warn("[vue-progressive-image] An error occured during the image loading"),(this.fallback||this.options.fallback)&&(this.imageError=!0,this.handleImageLoading())},t.src=o},loadPlaceholder(){if(!this.placeholder&&!this.options.placeholder)return;const t=new Image,e=this.placeholder||this.options.placeholder;t.src=e,t.onload=()=>{this.placeholderImage=e,this.$emit("onLoadPlaceholder",e)},t.onerror=s=>{this.$emit("onPlaceholderError",s),process.env.NODE_ENV!=="production"&&console.warn("[vue-progressive-image] An error occured during the placeholder image loading")}},handleImageLoading(){this.loadPlaceholder(),this.loadImage()}}},T="";function h(t,e,s,o,a,d,f,P){var r=typeof t=="function"?t.options:t;e&&(r.render=e,r.staticRenderFns=s,r._compiled=!0),o&&(r.functional=!0),d&&(r._scopeId="data-v-"+d);var l;if(f?(l=function(n){n=n||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!n&&typeof __VUE_SSR_CONTEXT__<"u"&&(n=__VUE_SSR_CONTEXT__),a&&a.call(this,n),n&&n._registeredComponents&&n._registeredComponents.add(f)},r._ssrRegister=l):a&&(l=P?function(){a.call(this,(r.functional?this.parent:this).$root.$options.shadowRoot)}:a),l)if(r.functional){r._injectStyles=l;var B=r.render;r.render=function(E,y){return l.call(y),B(E,y)}}else{var _=r.beforeCreate;r.beforeCreate=_?[].concat(_,l):[l]}return{exports:t,options:r}}const b={name:"progressive-img",props:{imageCustomClass:{type:String}},mixins:[g],computed:{placeholderStyle(){return{...this.blurStyle,"background-image":`url(${this.placeholder||this.options.placeholder})`}}}};var R=function(){var e=this,s=e._self._c;return s("div",{ref:"image",class:["progressive-image",e.customClass],style:e.componentStyle},[e.$slots.loader&&!e.shouldImageRender?s("div",{staticClass:"progressive-image-loader"},[e._t("loader")],2):e._e(),e.cached?s("div",{staticClass:"progressive-image-wrapper",style:e.wrapperStyle},[s("img",{class:["progressive-image-main",e.imageCustomClass],attrs:{src:e.image,alt:e.alt}})]):s("span",[e.shouldImageRender?e._e():s("canvas",{ref:"canvas",staticClass:"progressive-image-canvas",attrs:{width:"1",height:"1"}}),s("div",{staticClass:"progressive-image-wrapper",style:e.wrapperStyle},[s("transition",{attrs:{"enter-class":"progressive-image-enter","enter-active-class":"progressive-image-before-enter"}},[s("img",{directives:[{name:"show",rawName:"v-show",value:e.shouldImageRender,expression:"shouldImageRender"}],ref:"main",class:["progressive-image-main",e.imageCustomClass],attrs:{src:e.image,alt:e.alt}})]),s("transition",{attrs:{"enter-class":"progressive-image-enter","enter-active-class":"progressive-image-before-enter"}},[e.shouldPlaceholderRender?s("div",{staticClass:"progressive-image-placeholder",class:{"progressive-image-placeholder-out":e.shouldImageRender},style:e.placeholderStyle}):e._e()])],1)])])},I=[],C=h(b,R,I,!1,null,null,null,null);const u=C.exports,N="",S={name:"progressive-background",props:{noRatio:{type:Boolean,required:!1}},mixins:[g],data(){return{applyRatio:!this.noRatio}},computed:{imageStyle(){return{backgroundImage:`url(${this.image})`}},placeholderStyle(){return{...this.blurStyle,backgroundImage:`url(${this.placeholderImage})`}}}};var k=function(){var e=this,s=e._self._c;return s("div",{class:["progressive-background",e.customClass]},[e.cached?s("div",{style:e.wrapperStyle},[s("div",{staticClass:"progressive-background-image",style:e.imageStyle}),s("div",{staticClass:"progressive-background-slot"},[e._t("content")],2)]):s("span",[e.$slots.loader&&!e.shouldImageRender?s("div",{staticClass:"progressive-image-loader"},[e._t("loader")],2):e._e(),e.shouldImageRender?e._e():s("div",[s("canvas",{ref:"canvas",staticClass:"progressive-background-canvas",attrs:{width:"1",height:"1"}}),s("img",{ref:"main",attrs:{src:e.image,hidden:""}})]),s("div",{style:e.wrapperStyle},[s("transition",{attrs:{"enter-class":"progressive-background-enter","enter-active-class":"progressive-background-before"}},[e.shouldImageRender?s("div",{staticClass:"progressive-background-image",style:e.imageStyle}):e._e()]),s("div",{staticClass:"progressive-background-slot"},[e._t("content",null,{visible:!e.shouldImageRender})],2),s("transition",{attrs:{"enter-class":"progressive-background-enter","enter-active-class":"progressive-background-before"}},[e.shouldPlaceholderRender?s("div",{staticClass:"progressive-background-placeholder",style:e.placeholderStyle}):e._e()])],1)])])},$=[],w=h(S,k,$,!1,null,null,null,null);const p=w.exports,m=function(t,e={}){return{...t,data:()=>({options:e})}},v=function(t,e={}){t.component("progressive-img",m(u,e)),t.component("progressive-background",m(p,e))};i.ProgressiveBackground=p,i.ProgressiveImage=u,i.default=v,i.install=v,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "vue-progressive-image",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "Vue progressive image loading plugin",
-  "main": "dist/vue-progressive-image.js",
+  "main": "./dist/vue-progressive-image.umd.js",
+  "module": "./dist/vue-progressive-image.es.js",
+  "unpkg": "./dist/vue-progressive-image.umd.js",
+  "jsdelivr": "./dist/vue-progressive-image.umd.js",
   "files": [
@@ -10,5 +13,5 @@ "dist"
   "scripts": {
-    "dev": "webpack --config config/webpack.dev.config.js -w --hide-modules",
-    "build": "webpack --config config/webpack.prod.config.js --optimize-minimize --hide-modules",
-    "prepublish": "webpack --config config/webpack.prod.config.js --optimize-minimize --hide-modules"
+    "dev": "cross-env NODE_ENV=development vite build --watch",
+    "build": "cross-env NODE_ENV=production vite build",
+    "prepublish": "yarn build"
   },
@@ -35,15 +38,12 @@ "author": {
   "devDependencies": {
-    "babel-core": "^6.23.1",
-    "babel-loader": "^6.3.2",
-    "babel-preset-es2015": "^6.22.0",
-    "babel-preset-stage-2": "^6.22.0",
-    "babel-register": "^6.23.0",
-    "compression-webpack-plugin": "^0.3.2",
-    "css-loader": "^0.26.2",
-    "style-loader": "^0.13.2",
-    "vue-loader": "^11.1.3",
-    "vue-template-compiler": "^2.2.1",
-    "webpack": "^3.4.1",
-    "webpack-merge": "^3.0.0"
+    "@vitejs/plugin-vue2": "^1.1.2",
+    "cross-env": "^7.0.3",
+    "vite": "^3.0.0",
+    "vite-plugin-style-inject": "^0.0.1",
+    "vue": "^2.2.1",
+    "vue-template-compiler": "^2.2.1"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.1"
   }
 }

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

6

decreased by-50%

Lines of code

287

increased by14.8%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

28181

decreased by-28.88%

Dependency count

1

increased byInfinity%

Number of package files

5

decreased by-44.44%

No dependency changes