v-lazy-image - npm Package Compare versions

Comparing version 1.3.1 to 1.3.2

dist/v-lazy-image.cjs.js

 /**
- * v-lazy-image v1.3.1
+ * v-lazy-image v1.3.2
  * (c) 2019 Alex Jover Morales <[e-mail]>
@@ -64,8 +64,4 @@ * @license MIT
     });
-
     if (this.usePicture) {
-      return h("picture", { on: { load: this.load } }, [
-        this.$slots.default,
-        img
-      ]);
+      return h("picture", { on: { load: this.load } }, this.intersected ? [ this.$slots.default, img ] : [] );
     } else {
@@ -72,0 +68,0 @@ return img;

dist/v-lazy-image.es.js

 /**
- * v-lazy-image v1.3.1
+ * v-lazy-image v1.3.2
  * (c) 2019 Alex Jover Morales <[e-mail]>
@@ -60,8 +60,4 @@ * @license MIT
     });
-
     if (this.usePicture) {
-      return h("picture", { on: { load: this.load } }, [
-        this.$slots.default,
-        img
-      ]);
+      return h("picture", { on: { load: this.load } }, this.intersected ? [ this.$slots.default, img ] : [] );
     } else {
@@ -68,0 +64,0 @@ return img;

dist/v-lazy-image.js

 /**
- * v-lazy-image v1.3.1
+ * v-lazy-image v1.3.2
  * (c) 2019 Alex Jover Morales <[e-mail]>
@@ -66,8 +66,4 @@ * @license MIT
     });
-
     if (this.usePicture) {
-      return h("picture", { on: { load: this.load } }, [
-        this.$slots.default,
-        img
-      ]);
+      return h("picture", { on: { load: this.load } }, this.intersected ? [ this.$slots.default, img ] : [] );
     } else {
@@ -74,0 +70,0 @@ return img;

dist/v-lazy-image.min.js

 /**
- * v-lazy-image v1.3.1
+ * v-lazy-image v1.3.2
  * (c) 2019 Alex Jover Morales <[e-mail]>
@@ -7,2 +7,2 @@ * @license MIT
 
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.VLazyImage={})}(this,function(e){"use strict";var t={props:{src:{type:String,required:!0},srcPlaceholder:{type:String,default:""},srcset:{type:String},intersectionOptions:{type:Object,default:function(){return{}}},usePicture:{type:Boolean,default:!1}},inheritAttrs:!1,data:function(){return{observer:null,intersected:!1,loaded:!1}},computed:{srcImage:function(){return this.intersected?this.src:this.srcPlaceholder},srcsetImage:function(){return!(!this.intersected||!this.srcset)&&this.srcset}},methods:{load:function(){this.$el.getAttribute("src")!==this.srcPlaceholder&&(this.loaded=!0,this.$emit("load"))}},render:function(e){var t=e("img",{attrs:{src:this.srcImage,srcset:this.srcsetImage},domProps:this.$attrs,class:{"v-lazy-image":!0,"v-lazy-image-loaded":this.loaded},on:{load:this.load}});return this.usePicture?e("picture",{on:{load:this.load}},[this.$slots.default,t]):t},mounted:function(){var e=this;"IntersectionObserver"in window?(this.observer=new IntersectionObserver(function(t){t[0].isIntersecting&&(e.intersected=!0,e.observer.disconnect(),e.$emit("intersect"))},this.intersectionOptions),this.observer.observe(this.$el)):console.error("v-lazy-image: this browser doesn't support IntersectionObserver. Please use this polyfill to make it work https://github.com/w3c/IntersectionObserver/tree/master/polyfill.")},destroyed:function(){this.observer.disconnect()}},s={install:function(e,s){e.component("VLazyImage",t)}};e.default=t,e.VLazyImagePlugin=s,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.VLazyImage={})}(this,function(e){"use strict";var t={props:{src:{type:String,required:!0},srcPlaceholder:{type:String,default:""},srcset:{type:String},intersectionOptions:{type:Object,default:function(){return{}}},usePicture:{type:Boolean,default:!1}},inheritAttrs:!1,data:function(){return{observer:null,intersected:!1,loaded:!1}},computed:{srcImage:function(){return this.intersected?this.src:this.srcPlaceholder},srcsetImage:function(){return!(!this.intersected||!this.srcset)&&this.srcset}},methods:{load:function(){this.$el.getAttribute("src")!==this.srcPlaceholder&&(this.loaded=!0,this.$emit("load"))}},render:function(e){var t=e("img",{attrs:{src:this.srcImage,srcset:this.srcsetImage},domProps:this.$attrs,class:{"v-lazy-image":!0,"v-lazy-image-loaded":this.loaded},on:{load:this.load}});return this.usePicture?e("picture",{on:{load:this.load}},this.intersected?[this.$slots.default,t]:[]):t},mounted:function(){var e=this;"IntersectionObserver"in window?(this.observer=new IntersectionObserver(function(t){t[0].isIntersecting&&(e.intersected=!0,e.observer.disconnect(),e.$emit("intersect"))},this.intersectionOptions),this.observer.observe(this.$el)):console.error("v-lazy-image: this browser doesn't support IntersectionObserver. Please use this polyfill to make it work https://github.com/w3c/IntersectionObserver/tree/master/polyfill.")},destroyed:function(){this.observer.disconnect()}},s={install:function(e,s){e.component("VLazyImage",t)}};e.default=t,e.VLazyImagePlugin=s,Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "v-lazy-image",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "A Vue.js component to lazy load images using the Intersection Observer",
@@ -44,3 +44,3 @@ "main": "dist/v-lazy-image.cjs.js",
     "jest-serializer-vue": "^2.0.2",
-    "rollit": "0.0.7"
+    "rollit": "0.0.8"
   },
@@ -47,0 +47,0 @@ "peerDependencies": {

README.md

@@ -9,3 +9,3 @@ # v-lazy-image
 
-Check out the fundaments on how it's built in [this Alligator.io article](https://alligator.io/vuejs/lazy-image/).
+> Do you know **[VueDose](https://vuedose.tips)**? It's where you can learn tips about the Vue.js ecosystem in a concise format, perfect for busy devs! 🦄
 
@@ -12,0 +12,0 @@ ### Demos

src/__tests__/index.test.js

@@ -57,1 +57,35 @@ import { shallowMount } from "@vue/test-utils";
 });
+
+test('picture element lazy loads', () => {
+  let intersect;
+  global.IntersectionObserver = function(cb) {
+    intersect = cb;
+    return {
+      observe: () => {},
+      disconnect: () => {}
+    };
+  };
+  let source = '<source srcset="test" />';
+  let src = "http://lorempixel.com/400/200/";
+  const wrapper = shallowMount(
+    Component,
+    {
+      slots: {
+        default: [source, source],
+      },
+      propsData: {
+        src,
+        usePicture: true
+      }
+    }
+  );
+  expect(wrapper.vm.intersected).toBe(false);
+  expect(wrapper.isEmpty()).toBe(true);
+  intersect([
+    { isIntersecting: true }
+  ]);
+  let imgWrapper = wrapper.find("img");
+  expect(imgWrapper.is('img')).toBe(true);
+  expect(wrapper.vm.intersected).toBe(true);
+  expect(imgWrapper.attributes('src')).toBe(src);
+});

src/index.js

@@ -54,8 +54,4 @@ const VLazyImageComponent = {
     });
-
     if (this.usePicture) {
-      return h("picture", { on: { load: this.load } }, [
-        this.$slots.default,
-        img
-      ]);
+      return h("picture", { on: { load: this.load } }, this.intersected ? [ this.$slots.default, img ] : [] );
     } else {
@@ -62,0 +58,0 @@ return img;

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

Improved metrics

Total package byte prevSize

22564

increased by4.01%

Lines of code

466

increased by4.72%

No dependency changes