v-lazy-image - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

dist/v-lazy-image.cjs.js

 /**
- * v-lazy-image v1.2.1
+ * v-lazy-image v1.2.2
  * (c) 2018 Alex Jover Morales <[e-mail]>
@@ -51,3 +51,3 @@ * @license MIT
     this.$el.addEventListener("load", function (ev) {
-      if (this$1.$el.src === this$1.src) {
+      if (this$1.$el.getAttribute('src') !== this$1.srcPlaceholder) {
         this$1.loaded = true;
@@ -54,0 +54,0 @@ this$1.$emit("load");

dist/v-lazy-image.es.js

 /**
- * v-lazy-image v1.2.1
+ * v-lazy-image v1.2.2
  * (c) 2018 Alex Jover Morales <[e-mail]>
@@ -47,3 +47,3 @@ * @license MIT
     this.$el.addEventListener("load", function (ev) {
-      if (this$1.$el.src === this$1.src) {
+      if (this$1.$el.getAttribute('src') !== this$1.srcPlaceholder) {
         this$1.loaded = true;
@@ -50,0 +50,0 @@ this$1.$emit("load");

dist/v-lazy-image.js

 /**
- * v-lazy-image v1.2.1
+ * v-lazy-image v1.2.2
  * (c) 2018 Alex Jover Morales <[e-mail]>
@@ -53,3 +53,3 @@ * @license MIT
     this.$el.addEventListener("load", function (ev) {
-      if (this$1.$el.src === this$1.src) {
+      if (this$1.$el.getAttribute('src') !== this$1.srcPlaceholder) {
         this$1.loaded = true;
@@ -56,0 +56,0 @@ this$1.$emit("load");

dist/v-lazy-image.min.js

 /**
- * v-lazy-image v1.2.1
+ * v-lazy-image v1.2.2
  * (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:""},srcset:{type:String},intersectionOptions:{type:Object,default:function(){return{}}}},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.intersectionOptions),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})});
+!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{}}}},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.getAttribute("src")!==e.srcPlaceholder&&(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.intersectionOptions),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.2.1",
+  "version": "1.2.2",
   "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

 # v-lazy-image
 
 [![npm](https://img.shields.io/npm/v/v-lazy-image.svg)](https://www.npmjs.com/package/v-lazy-image)
+[![npm](https://img.shields.io/npm/dm/v-lazy-image.svg)](https://www.npmjs.com/package/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/docs/Web/API/Intersection_Observer_API).
@@ -12,5 +14,5 @@
 * [Simple demo](https://codesandbox.io/s/r5wmj970wm)
-* [Responsive images](codesandbox.io/s/k2kp64qkq7), by [@aarongarciah](https://twitter.com/aarongarciah)
+* [Responsive images](https://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)
+* [Performant progressive blur using SVG](https://codesandbox.io/s/2ox0z4ymop)
 
@@ -46,3 +48,3 @@ ## Usage
 
-You must pass a `src` property with the link of the image:
+You must pass an `src` property with the link of the image:
 
@@ -99,3 +101,3 @@ ```html
 
-Using the srcset prop you can set images for different resolutions::
+Using the `srcset` property you can set images for different resolutions:
 
@@ -110,3 +112,3 @@ ```html
 
-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:
+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:
 
@@ -127,3 +129,3 @@ ```html
 
-Aside from the following API, you can pass any img attribute, such as `alt`, and they'll be added to the rendered `<img>` tag.
+Aside from the following API, you can pass any *img* attribute, such as `alt`, and they'll be added to the rendered `<img>` tag.
 
@@ -145,3 +147,3 @@ _Fields marked as (\*) are required._
 | ----------- | -------------------------------------------------------- |
-| `intersect` | Triggered when the image intersects in the viewport      |
+| `intersect` | Triggered when the image intersects the viewport         |
 | `load`      | Triggered when the lazy image defined in `src` is loaded |

src/index.js

@@ -39,3 +39,3 @@ const VLazyImageComponent = {
     this.$el.addEventListener("load", ev => {
-      if (this.$el.src === this.src) {
+      if (this.$el.getAttribute('src') !== this.srcPlaceholder) {
         this.loaded = true;
@@ -42,0 +42,0 @@ this.$emit("load");

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

16092

increased by1.64%

Number of lines in readme file

144

increased by1.41%

No dependency changes