vue-lazy-images - npm Package Compare versions

Comparing version 1.4.1 to 1.4.2

dist/VueLazyImages.js

 /*!
- * vue-lazy-images v1.4.1
+ * vue-lazy-images v1.4.2
  * (c) 2017 LowesYang
  * Released under the MIT License.
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueLazyImages=t():e.VueLazyImages=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist/",t(t.s=1)}([function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),i=n(4),a=["scroll","wheel","mousewheel","resize","animationend","transitionend","touchmove"],s=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};o(this,e),this.init(t)}return r(e,[{key:"init",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.images=[],this.scrollParent=new WeakSet,this.options=e,this.eventsList=e.eventsList||a}},{key:"addImage",value:function(e){if(e.tagName&&"img"===e.tagName.toLowerCase()){var t=(0,i.getScrollParent)(e);if(t){var n={el:e,scrollParent:t};this.images.push(n),this.initListener(t)}}}},{key:"removeImage",value:function(e){var t=this.images.findIndex(function(t){return t.el===e});this.images.splice(t,1)}},{key:"initListener",value:function(e){var t=this,n=void 0;if(n=this.options.throttle?(0,i.throttle)(this.loadImage,this.options.throttle):this.options.debounce?(0,i.debounce)(this.loadImage,this.options.debounce):this.loadImage,!this.scrollParent.has(e)){var o=(0,i.getStyle)(e,"position");""!==o&&"static"!==o||(e.style.position="relative"),this.scrollParent.add(e),this.eventsList.forEach(function(o){e.addEventListener(o,n.bind(t))})}}},{key:"loadImage",value:function(){for(var e=this,t=this.images,n=0;n<t.length;n++)!function(o){var r=t[o].scrollParent,a=t[o].el;if((0,i.checkInView)(a,r,e.options.offset)){var s=a.dataset.src;s||console.error(a+" has no attribute 'data-src'!");var u=new Image;u.src=s,u.onload=function(){a.src=s,u=null},t.splice(o--,1)}n=o}(n)}}]),e}();t.default=s},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.VueLazyImage=t.install=void 0;var r=n(2),i=o(r),a=n(0),s=o(a),u=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.component("lazy-image",i.default),t.offset=parseInt(t.offset,10)||0;var n=new s.default(t);e.prototype.$lazyImages=n};t.default={install:u,VueLazyImage:i.default},t.install=u,t.VueLazyImage=i.default},function(e,t,n){var o=n(5)(n(3),n(6),null,null);o.options.__file="/Users/yyh/Documents/website/vue-lazyload-images/src/VueLazyImage.vue",o.esModule&&Object.keys(o.esModule).some(function(e){return"default"!==e&&"__esModule"!==e})&&console.error("named exports are not supported in *.vue files."),o.options.functional&&console.error("[vue-loader] VueLazyImage.vue: functional components are not supported with templates, they should use render functions."),e.exports=o.exports},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={data:function(){return{show:!1}},mounted:function(){var e=this;this.$lazyImages.addImage(this.$refs.target),this.$refs.target.onload=function(){e.show=!0},this.$lazyImages.loadImage()},beforeDestroy:function(){this.$lazyImages.removeImage(this.$refs.target)},props:{src:{type:String,required:!0},placeholder:String}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(e,t){return e&&e!==window?(getComputedStyle?getComputedStyle(e,null).getPropertyValue(t):e.style[t])||e.style[t]:null},r=function(e){return/scroll|auto/.test(o(e,"overflow")+o(e,"overflow-y")+o(e,"overflow-x"))},i=function(e){if(!(e instanceof HTMLElement))return console.error(e+" is not an HTMLElement"),null;for(var t=e;t&&t!==document.body&&t!==document.documentElement;){if(!t.parentNode)return null;if(r(t))return t;t=t.parentNode}return window},a=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,r=void 0,i=void 0,a=0,s=0;if(t===window){r=document.documentElement.clientHeight||document.body.clientHeight,i=document.documentElement.clientWidth||document.body.clientWidth;var u=void 0,l=void 0,c=void 0,f=void 0,d=void 0;return d=e.getBoundingClientRect(),u=d.top-n,l=d.left-n,f=d.bottom+n,c=d.right+n,u<r&&f>0&&l<i&&c>0}var p=t.scrollTop,h=t.scrollLeft,v=e.offsetWidth,m=e.offsetHeight;for(r=t.clientHeight,i=t.clientWidth;e!=t&&null!=e;){var g=parseInt(o(e,"border-width"));a+=e.offsetTop+g,s+=e.offsetLeft+g,e=e.offsetParent}return p+r>a-n&&a+m+n>p&&h+i>s-n&&s+v+n>h},s=function(e,t){var n=0,o=void 0;return!t||t<=0?e:function(){var r=Date.now();r-n>t?(n=r,e.apply(this,arguments)):(clearTimeout(o),o=setTimeout(e.bind.apply(e,[this].concat(Array.prototype.slice.call(arguments))),t-(r-n)))}},u=function(e,t){var n=void 0;return!t||t<=0?e:function(){clearTimeout(n),n=setTimeout(e.bind.apply(e,[this].concat(Array.prototype.slice.call(arguments))),t)}};t.getScrollParent=i,t.getStyle=o,t.checkOverflow=r,t.checkInView=a,t.throttle=s,t.debounce=u},function(e,t){e.exports=function(e,t,n,o){var r,i=e=e||{},a=typeof e.default;"object"!==a&&"function"!==a||(r=e,i=e.default);var s="function"==typeof i?i.options:i;if(t&&(s.render=t.render,s.staticRenderFns=t.staticRenderFns),n&&(s._scopeId=n),o){var u=Object.create(s.computed||null);Object.keys(o).forEach(function(e){var t=o[e];u[e]=function(){return t}}),s.computed=u}return{esModule:r,exports:i,options:s}}},function(e,t,n){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("img",{ref:"target",class:{show:e.show},attrs:{"data-src":e.src,src:e.placeholder,width:"100%",height:"100%"}})])},staticRenderFns:[]},e.exports.render._withStripped=!0}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueLazyImages=t():e.VueLazyImages=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist/",t(t.s=1)}([function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),i=n(4),a=["scroll","wheel","mousewheel","resize","animationend","transitionend","touchmove"],s=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};o(this,e),this.init(t)}return r(e,[{key:"init",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.images=[],this.scrollParent=new WeakSet,this.options=e,this.eventsList=e.eventsList||a}},{key:"addImage",value:function(e){if(e.tagName&&"img"===e.tagName.toLowerCase()){var t=(0,i.getScrollParent)(e);if(t){var n={el:e,scrollParent:t};this.images.push(n),this.initListener(t)}}}},{key:"removeImage",value:function(e){var t=this.images.findIndex(function(t){return t.el===e});this.images.splice(t,1)}},{key:"initListener",value:function(e){var t=this,n=void 0;if(n=this.options.throttle?(0,i.throttle)(this.loadImage,this.options.throttle):this.options.debounce?(0,i.debounce)(this.loadImage,this.options.debounce):this.loadImage,!this.scrollParent.has(e)){var o=(0,i.getStyle)(e,"position");""!==o&&"static"!==o||(e.style.position="relative"),this.scrollParent.add(e),this.eventsList.forEach(function(o){e.addEventListener(o,n.bind(t))})}}},{key:"loadImage",value:function(){for(var e=this,t=this.images,n=0;n<t.length;n++)!function(o){var r=t[o].scrollParent,a=t[o].el;if((0,i.checkInView)(a,r,e.options.offset)){var s=a.dataset.src;s||console.error(a+" has no attribute 'data-src'!");var u=new Image;u.src=s,u.onload=function(){a.src=s,u=null},t.splice(o--,1)}n=o}(n)}}]),e}();t.default=s},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.VueLazyImage=t.install=void 0;var r=n(2),i=o(r),a=n(0),s=o(a),u=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.component("lazy-image",i.default),t.offset=parseInt(t.offset,10)||0;var n=new s.default(t);e.prototype.$lazyImages=n};t.default={install:u,VueLazyImage:i.default},t.install=u,t.VueLazyImage=i.default},function(e,t,n){var o=n(5)(n(3),n(6),null,null);o.options.__file="/Users/yyh/Documents/website/vue-lazyload-images/src/VueLazyImage.vue",o.esModule&&Object.keys(o.esModule).some(function(e){return"default"!==e&&"__esModule"!==e})&&console.error("named exports are not supported in *.vue files."),o.options.functional&&console.error("[vue-loader] VueLazyImage.vue: functional components are not supported with templates, they should use render functions."),e.exports=o.exports},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={data:function(){return{show:!1}},mounted:function(){var e=this;this.$lazyImages.addImage(this.$refs.target),this.$refs.target.onload=function(){e.show=!0},this.$lazyImages.loadImage()},beforeDestroy:function(){this.$lazyImages.removeImage(this.$refs.target)},props:{src:{type:String,required:!0},placeholder:String}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(e,t){return e&&e!==window?(getComputedStyle?getComputedStyle(e,null).getPropertyValue(t):e.style[t])||e.style[t]:null},r=function(e){return/scroll|auto/.test(o(e,"overflow")+o(e,"overflow-y")+o(e,"overflow-x"))},i=function(e){if(!(e instanceof HTMLElement))return console.error(e+" is not an HTMLElement"),null;for(var t=e;t&&t!==document.body&&t!==document.documentElement;){if(!t.parentNode)return null;if(r(t))return t;t=t.parentNode}return window},a=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,r=void 0,i=void 0,a=0,s=0,u=void 0;r=document.documentElement.clientHeight||document.body.clientHeight,i=document.documentElement.clientWidth||document.body.clientWidth;var l=void 0,c=void 0,f=void 0,d=void 0,p=void 0;if(p=e.getBoundingClientRect(),l=p.top-n,c=p.left-n,d=p.bottom+n,f=p.right+n,u=l<r&&d>0&&c<i&&f>0,t!==window){var h=t.scrollTop,v=t.scrollLeft,m=e.offsetWidth,g=e.offsetHeight;for(r=t.clientHeight,i=t.clientWidth;e!=t&&null!=e;){var y=parseInt(o(e,"border-width"));a+=e.offsetTop+y,s+=e.offsetLeft+y,e=e.offsetParent}u=u&&h+r>a-n&&a+g+n>h&&v+i>s-n&&s+m+n>v}return u},s=function(e,t){var n=0,o=void 0;return!t||t<=0?e:function(){var r=Date.now();r-n>t?(n=r,e.apply(this,arguments)):(clearTimeout(o),o=setTimeout(e.bind.apply(e,[this].concat(Array.prototype.slice.call(arguments))),t-(r-n)))}},u=function(e,t){var n=void 0;return!t||t<=0?e:function(){clearTimeout(n),n=setTimeout(e.bind.apply(e,[this].concat(Array.prototype.slice.call(arguments))),t)}};t.getScrollParent=i,t.getStyle=o,t.checkOverflow=r,t.checkInView=a,t.throttle=s,t.debounce=u},function(e,t){e.exports=function(e,t,n,o){var r,i=e=e||{},a=typeof e.default;"object"!==a&&"function"!==a||(r=e,i=e.default);var s="function"==typeof i?i.options:i;if(t&&(s.render=t.render,s.staticRenderFns=t.staticRenderFns),n&&(s._scopeId=n),o){var u=Object.create(s.computed||null);Object.keys(o).forEach(function(e){var t=o[e];u[e]=function(){return t}}),s.computed=u}return{esModule:r,exports:i,options:s}}},function(e,t,n){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("img",{ref:"target",class:{show:e.show},attrs:{"data-src":e.src,src:e.placeholder,width:"100%",height:"100%"}})])},staticRenderFns:[]},e.exports.render._withStripped=!0}])});

package.json

 {
   "name": "vue-lazy-images",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "A plugin of lazy-load images for vue2.x",
@@ -10,3 +10,3 @@ "main": "dist/VueLazyImages.js",
     "start": "webpack-dev-server --hot --inline --port 8080 --config config/webpack.dev.config.js",
-    "build": "webpack --config config/webpack.prod.config.js",
+    "build": "npm run test && webpack --config config/webpack.prod.config.js",
     "coverage": "cat ./coverage/lcov.info | coveralls"
@@ -13,0 +13,0 @@ },

README.md

 # vue-lazyload-images
-[![npm](https://img.shields.io/badge/npm-v1.3.1-green.svg)](https://www.npmjs.com/package/vue-lazy-images)
+[![npm](https://img.shields.io/badge/npm-v1.4.2-green.svg)](https://www.npmjs.com/package/vue-lazy-images)
 [![Build Status](https://travis-ci.org/yyh1102/vue-lazyload-images.svg?branch=master)](https://travis-ci.org/yyh1102/vue-lazyload-images)
@@ -4,0 +4,0 @@ [![Coverage Status](https://coveralls.io/repos/github/yyh1102/vue-lazyload-images/badge.svg)](https://coveralls.io/github/yyh1102/vue-lazyload-images)

src/utils.js

@@ -32,16 +32,16 @@ const getStyle = function (el, prop) {
   let offsetTop = 0, offsetLeft = 0;
-  if (scrollParent === window) {
-    clientH = document.documentElement.clientHeight || document.body.clientHeight;
-    clientW = document.documentElement.clientWidth || document.body.clientWidth;
+  let isInView;
+  clientH = document.documentElement.clientHeight || document.body.clientHeight;
+  clientW = document.documentElement.clientWidth || document.body.clientWidth;
 
-    // use getBoundingClientRect
-    let top, left, right, bottom, rect;
-    rect = el.getBoundingClientRect();
-    top = rect.top - offset;
-    left = rect.left - offset;
-    bottom = rect.bottom + offset;
-    right = rect.right + offset;
-    return top < clientH && bottom > 0 && left < clientW && right > 0
-  }
-  else {
+  // use getBoundingClientRect
+  let top, left, right, bottom, rect;
+  rect = el.getBoundingClientRect();
+  top = rect.top - offset;
+  left = rect.left - offset;
+  bottom = rect.bottom + offset;
+  right = rect.right + offset;
+  isInView = top < clientH && bottom > 0 && left < clientW && right > 0
+
+  if(scrollParent!==window){
     let scrollTop = scrollParent.scrollTop;
@@ -58,6 +58,6 @@ let scrollLeft = scrollParent.scrollLeft;
     }
-    return scrollTop + clientH > offsetTop - offset && offsetTop + height + offset > scrollTop
-      && scrollLeft + clientW > offsetLeft - offset && offsetLeft + width + offset > scrollLeft
-
+    isInView = isInView && (scrollTop + clientH > offsetTop - offset && offsetTop + height + offset > scrollTop
+      && scrollLeft + clientW > offsetLeft - offset && offsetLeft + width + offset > scrollLeft)
   }
+  return isInView;
 }
@@ -64,0 +64,0 @@

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

9197957

No dependency changes