v-lazy-image - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/v-lazy-image.cjs.js

 /**
- * v-lazy-image v1.0.1
+ * v-lazy-image v1.1.0
  * (c) 2018 Alex Jover Morales <[e-mail]>
@@ -20,2 +20,5 @@ * @license MIT
       default: ""
+    },
+    srcset: {
+      type: String
     }
@@ -27,2 +30,5 @@ },
       return this.intersected ? this.src : this.srcPlaceholder;
+    },
+    srcsetImage: function srcsetImage() {
+      return this.intersected && this.srcset ? this.srcset : false;
     }
@@ -32,3 +38,3 @@ },
     return h("img", {
-      attrs: { src: this.srcImage },
+      attrs: { src: this.srcImage, srcset: this.srcsetImage },
       class: {
@@ -35,0 +41,0 @@ "v-lazy-image": true,

dist/v-lazy-image.es.js

 /**
- * v-lazy-image v1.0.1
+ * v-lazy-image v1.1.0
  * (c) 2018 Alex Jover Morales <[e-mail]>
@@ -16,2 +16,5 @@ * @license MIT
       default: ""
+    },
+    srcset: {
+      type: String
     }
@@ -23,2 +26,5 @@ },
       return this.intersected ? this.src : this.srcPlaceholder;
+    },
+    srcsetImage: function srcsetImage() {
+      return this.intersected && this.srcset ? this.srcset : false;
     }
@@ -28,3 +34,3 @@ },
     return h("img", {
-      attrs: { src: this.srcImage },
+      attrs: { src: this.srcImage, srcset: this.srcsetImage },
       class: {
@@ -31,0 +37,0 @@ "v-lazy-image": true,

dist/v-lazy-image.js

 /**
- * v-lazy-image v1.0.1
+ * v-lazy-image v1.1.0
  * (c) 2018 Alex Jover Morales <[e-mail]>
@@ -22,2 +22,5 @@ * @license MIT
       default: ""
+    },
+    srcset: {
+      type: String
     }
@@ -29,2 +32,5 @@ },
       return this.intersected ? this.src : this.srcPlaceholder;
+    },
+    srcsetImage: function srcsetImage() {
+      return this.intersected && this.srcset ? this.srcset : false;
     }
@@ -34,3 +40,3 @@ },
     return h("img", {
-      attrs: { src: this.srcImage },
+      attrs: { src: this.srcImage, srcset: this.srcsetImage },
       class: {
@@ -37,0 +43,0 @@ "v-lazy-image": true,

dist/v-lazy-image.min.js

 /**
- * v-lazy-image v1.0.1
+ * v-lazy-image v1.1.0
  * (c) 2018 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:""}},data:function(){return{observer:null,intersected:!1,loaded:!1}},computed:{srcImage:function(){return this.intersected?this.src:this.srcPlaceholder}},render:function(e){return e("img",{attrs:{src:this.srcImage},class:{"v-lazy-image":!0,"v-lazy-image-loaded":this.loaded}})},mounted:function(){var e=this;this.$el.addEventListener("load",function(t){e.$el.src===e.src&&(e.loaded=!0,e.$emit("load"))}),this.observer=new IntersectionObserver(function(t){t[0].isIntersecting&&(e.intersected=!0,e.observer.disconnect(),e.$emit("intersect"))}),this.observer.observe(this.$el)},destroyed:function(){this.observer.disconnect()}},n={install:function(e,n){e.component("VLazyImage",t)}};e.default=t,e.VLazyImagePlugin=n,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}},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}},render:function(e){return e("img",{attrs:{src:this.srcImage,srcset:this.srcsetImage},class:{"v-lazy-image":!0,"v-lazy-image-loaded":this.loaded}})},mounted:function(){var e=this;this.$el.addEventListener("load",function(t){e.$el.src===e.src&&(e.loaded=!0,e.$emit("load"))}),this.observer=new IntersectionObserver(function(t){t[0].isIntersecting&&(e.intersected=!0,e.observer.disconnect(),e.$emit("intersect"))}),this.observer.observe(this.$el)},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.0.1",
+  "version": "1.1.0",
   "description": "A Vue.js component to lazy load images using the Intersection Observer",
@@ -5,0 +5,0 @@ "main": "dist/v-lazy-image.cjs.js",

README.md

@@ -5,8 +5,12 @@ # v-lazy-image
 
-A Vue.js component to lazy load an image automatically when it enters the viewport using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
+A Vue.js component to lazy load an image automatically when it enters the viewport using the [Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API).
 
+Check out the fundaments on how it's built in [this Alligator.io article](https://alligator.io/vuejs/lazy-image/).
+
 ### Demos
 
 * [Simple demo](https://codesandbox.io/s/r5wmj970wm)
+* [Responsive images](codesandbox.io/s/k2kp64qkq7), by [@aarongarciah](https://twitter.com/aarongarciah)
 * [Progressive image loading with animations](https://codesandbox.io/s/9l3n6j5944), by [@aarongarciah](https://twitter.com/aarongarciah)
+* [Performant progressive blur using a SVG](https://codesandbox.io/s/2ox0z4ymop)
 
@@ -21,3 +25,3 @@ ## Usage
 
-You can register globally the component so its available in all your app:
+You can register the component globally so it's available in all your apps:
 
@@ -47,3 +51,3 @@ ```js
 <template>
-  <v-lazy-image src="http://lorempixel.com/400/200/"></v-lazy-image>
+  <v-lazy-image src="http://lorempixel.com/400/200/" />
 </template>
@@ -54,4 +58,5 @@ ```
 
-## Progressive loading
 
+## Progressive Loading
+
 You can use the `src-placeholder` property to define an image that is shown until the `src` image is loaded.
@@ -63,8 +68,6 @@
 <template>
-  <div>
-    <v-lazy-image
-      src="https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
-      src-placeholder="https://cdn-images-1.medium.com/max/80/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
-      ></v-lazy-image>
-  </div>
+  <v-lazy-image
+    src="https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
+    src-placeholder="https://cdn-images-1.medium.com/max/80/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
+    />
 </template>
@@ -87,13 +90,39 @@
 <template>
-  <div>
-    <v-lazy-image
-      src="https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
-      src-placeholder="https://cdn-images-1.medium.com/max/80/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
-      @intersect="..."
-      @load="..."
-      ></v-lazy-image>
-  </div>
+  <v-lazy-image
+    src="https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
+    src-placeholder="https://cdn-images-1.medium.com/max/80/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
+    @intersect="..."
+    @load="..."
+    />
 </template>
 ```
 
+[@jmperezperez](https://twitter.com/jmperezperez) has written about the [progressive loading technique](https://jmperezperez.com/more-progressive-image-loading/) on his blog, in case you want a deeper explanation.
+
+## Responsive Images
+
+Using the srcset prop you can set images for different resolutions::
+
+```html
+<template>
+  <v-lazy-image
+    srcset="image.jpg 1x, image_2x.jpg 2x"
+    />
+</template>
+```
+
+When using the srcset attribute is recommended to use also src as a fallback for browsers that doesn't support the srcset and sizes attributes:
+
+```html
+<template>
+  <v-lazy-image
+    srcset="image-320w.jpg 320w, image-480w.jpg 480w"
+    sizes="(max-width: 320px) 280px, 440px"
+    src="image-480w.jpg"
+  />
+</template>
+```
+
+The `srcset` prop is combinable with `src-placeholder` in order to apply progressive loading.
+
 ## API
@@ -111,2 +140,3 @@
 | `src-placeholder` | String        | If defined, it will be shown until the `src` image is loaded. <br> Useful for progressive image loading, [see demo](https://codesandbox.io/s/9l3n6j5944) |
+| `srcset`             | String | Images to be used for different resolutions 
 
@@ -113,0 +143,0 @@ ### Events

src/index.js

@@ -10,2 +10,5 @@ const VLazyImageComponent = {
       default: ""
+    },
+    srcset: {
+      type: String
     }
@@ -17,2 +20,5 @@ },
       return this.intersected ? this.src : this.srcPlaceholder;
+    },
+    srcsetImage() {
+      return this.intersected && this.srcset ? this.srcset : false;
     }
@@ -22,3 +28,3 @@ },
     return h("img", {
-      attrs: { src: this.srcImage },
+      attrs: { src: this.srcImage, srcset: this.srcsetImage },
       class: {
@@ -25,0 +31,0 @@ "v-lazy-image": true,

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

14925

increased by25.28%

Number of package files

8

increased by14.29%

Lines of code

271

increased by9.72%

Number of lines in readme file

142

increased by26.79%

No dependency changes