vue-lazy-images - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

config/webpack.prod.config.js

@@ -1,32 +0,32 @@
-var webpack=require("webpack");
-var pack=require("../package.json");
-var webpackDevConfig=require("./webpack.dev.config");
-var merge=require("webpack-merge");
+var webpack = require("webpack");
+var pack = require("../package.json");
+var webpackDevConfig = require("./webpack.dev.config");
+var merge = require("webpack-merge");
 
-module.exports=merge.smart({},webpackDevConfig,{
-    entry: {
-        VueLazyImages:'./src/index'
-    },
-    plugins:[
-        new webpack.optimize.UglifyJsPlugin({
-            compress:{
-                warnings:false,
-                drop_console:false
-            },
-            comments:false,
-            minimize:false
-        }),
-        new webpack.DefinePlugin({
-            'process.env':{
-                NODE_ENV:'"production"'
-            }
-        }),
-        new webpack.BannerPlugin({
-            raw:true,
-            banner:'/*!\n' + ' * ' + pack.name + ' v' + pack.version + '\n'
-            + ' * (c) ' + new Date().getFullYear() + ' ' + pack.author + '\n'
-            + ' * Released under the ' + pack.license + ' License.\n'
-            + ' */'
-        })
-    ]
+module.exports = merge.smart({}, webpackDevConfig, {
+  entry: {
+    VueLazyImages: './src/index'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false,
+        drop_console: false
+      },
+      comments: false,
+      minimize: false
+    }),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.BannerPlugin({
+      raw: true,
+      banner: '/*!\n' + ' * ' + pack.name + ' v' + pack.version + '\n'
+      + ' * (c) ' + new Date().getFullYear() + ' ' + pack.author + '\n'
+      + ' * Released under the ' + pack.license + ' License.\n'
+      + ' */'
+    })
+  ]
 });

dist/VueLazyImages.js

 /*!
- * vue-lazy-images v1.3.1
+ * vue-lazy-images v1.4.0
  * (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;if(!this.scrollParent.has(e)){var n=(0,i.getStyle)(e,"position");""!==n&&"static"!==n||(e.style.position="relative"),this.scrollParent.add(e),this.eventsList.forEach(function(n){e.addEventListener(n,t.loadImage.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,u=a.dataset.placeholder;if(s||console.error(a+" has no attribute 'data-src'!"),u){var l=new Image;l.src=s,a.src=u,l.onload=function(){a.src=s,l=null}}else a.src=s;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="D:\\website\\vue-lazy-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,v=t.scrollLeft,h=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&&v+i>s-n&&s+h+n>v};t.getScrollParent=i,t.getStyle=o,t.checkOverflow=r,t.checkInView=a},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,"data-placeholder":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,u=a.dataset.placeholder;if(s||console.error(a+" has no attribute 'data-src'!"),u){var l=new Image;l.src=s,a.src=u,l.onload=function(){a.src=s,l=null}}else a.src=s;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="D:\\website\\vue-lazy-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;return!t||t<=0?e:function(){var o=Date.now();o-n>t&&(n=o,e.apply(this,arguments))}},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,"data-placeholder":e.placeholder,width:"100%",height:"100%"}})])},staticRenderFns:[]},e.exports.render._withStripped=!0}])});

example/index.js

@@ -7,25 +7,25 @@ import Vue from "vue"
 new Vue({
-    data(){
-        return {
-            placeholder:'/example/loading.gif',
-            itemsY:[
-                "http://img3.a0bi.com/upload/ttq/20150525/1432550622613_middle.jpg",
-                "http://img.mp.itc.cn/upload/20170220/2f2a4d0eb018483b97a7093e39b54cf7_th.jpg",
-                "http://ww1.sinaimg.cn/mw600/c2ba660dtw1e53cbidiizj20sg0sgtao.jpg",
-                "http://pic2.52pk.com/files/140211/1283568_105559_9065.jpg",
-            ],
-            itemsX:[
-                "http://photocdn.sohu.com/20151218/mp49366462_1450443096991_4.jpeg",
-                "http://www.andinn.cn/picture/picture20120209530947475.jpg",
-            ]
-        }
+  data() {
+    return {
+      placeholder: '/example/loading.gif',
+      itemsY: [
+        "http://img3.a0bi.com/upload/ttq/20150525/1432550622613_middle.jpg",
+        "http://img.mp.itc.cn/upload/20170220/2f2a4d0eb018483b97a7093e39b54cf7_th.jpg",
+        "http://ww1.sinaimg.cn/mw600/c2ba660dtw1e53cbidiizj20sg0sgtao.jpg",
+        "http://pic2.52pk.com/files/140211/1283568_105559_9065.jpg",
+      ],
+      itemsX: [
+        "http://photocdn.sohu.com/20151218/mp49366462_1450443096991_4.jpeg",
+        "http://www.andinn.cn/picture/picture20120209530947475.jpg",
+      ]
+    }
+  },
+  methods: {
+    addImageY() {
+      this.itemsY.push(this.itemsY[Math.floor(Math.random() * this.itemsY.length)] + "?t=" + Date.now());
     },
-    methods:{
-        addImageY(){
-            this.itemsY.push(this.itemsY[Math.floor(Math.random()*this.itemsY.length)]+"?t="+Date.now());
-        },
-        addImageX(){
-            this.itemsX.push(this.itemsY[Math.floor(Math.random()*this.itemsY.length)]+"?t="+Date.now())
-        }
+    addImageX() {
+      this.itemsX.push(this.itemsY[Math.floor(Math.random() * this.itemsY.length)] + "?t=" + Date.now())
     }
+  }
 }).$mount("#App");

package.json

 {
   "name": "vue-lazy-images",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "A plugin of lazy-load images for vue2.x",
@@ -5,0 +5,0 @@ "main": "dist/VueLazyImages.js",

README.md

@@ -47,2 +47,4 @@ # vue-lazyload-images
 | offset | offset distance for pre-loading | 0 | Number |
-| events | events that you want parentNode listen for | ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] | Array |
+| events | events that you want parentNode listen for | ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] | Array |
+| throttle | spacing interval of continuous calling | 0(ms) | Number | 
+| debounce | idle time between two actions | 0(ms) | Number |

src/index.js

@@ -13,7 +13,7 @@ import VueLazyImage from "./VueLazyImage.vue"
  */
-const install=(vue,options={})=>{
-    vue.component('lazy-image',VueLazyImage);
-    options.offset=parseInt(options.offset,10) || 0;
-    let lazyImg=new LazyImage(options);
-    vue.prototype.$lazyImages=lazyImg;
+const install = (vue, options = {}) => {
+  vue.component('lazy-image', VueLazyImage);
+  options.offset = parseInt(options.offset, 10) || 0;
+  let lazyImg = new LazyImage(options);
+  vue.prototype.$lazyImages = lazyImg;
 }
@@ -23,9 +23,9 @@
 export default {
-    install,
-    VueLazyImage
+  install,
+  VueLazyImage
 }
 //for cdn
 export {
-    install,
-    VueLazyImage
+  install,
+  VueLazyImage
 }

src/LazyImage.js

@@ -1,71 +0,86 @@
-import {getStyle,getScrollParent,checkInView} from "./utils";
+import {getStyle, getScrollParent, checkInView, throttle, debounce} from "./utils";
+
 const DEFAULT_EVENTS = ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'];
 
-class LazyImage{
-    constructor(options={}){
-        this.init(options);
+class LazyImage {
+  constructor(options = {}) {
+    this.init(options);
+  }
+
+  init(options = {}) {
+    this.images = [];             //list of unload-images info
+    this.scrollParent = new WeakSet();      //list of scrollParent listener
+    this.options = options;
+    this.eventsList = options.eventsList || DEFAULT_EVENTS;
+
+  }
+
+  addImage(el) {
+    if (!el.tagName || el.tagName.toLowerCase() !== 'img') return;
+    let scrollParent = getScrollParent(el);
+    if (!scrollParent) return;
+    let image = {
+      el: el,
+      scrollParent: scrollParent
+    };
+    this.images.push(image);
+    this.initListener(scrollParent);
+  }
+
+  removeImage(el) {
+    const index = this.images.findIndex(item => item.el === el);
+    this.images.splice(index, 1);
+  }
+
+  initListener(scrollParent) {
+    let loadFn;
+    // get throttle or debounce function
+    if (this.options.throttle) {
+      loadFn = throttle(this.loadImage, this.options.throttle);
     }
-    init(options={}){
-        this.images=[];             //list of unload-images info
-        this.scrollParent=new WeakSet();      //list of scrollParent listener
-        this.options=options;
-        this.eventsList=options.eventsList || DEFAULT_EVENTS;
+    else if (this.options.debounce) {
+      loadFn = debounce(this.loadImage, this.options.debounce);
     }
-    addImage(el){
-        if(!el.tagName || el.tagName.toLowerCase()!=='img') return;
-        let scrollParent=getScrollParent(el);
-        if(!scrollParent) return;
-        let image={
-            el:el,
-            scrollParent:scrollParent
-        };
-        this.images.push(image);
-        this.initListener(scrollParent);
+    else loadFn = this.loadImage;
+    if (!this.scrollParent.has(scrollParent)) {
+      const position = getStyle(scrollParent, "position");
+      if (position === "" || position === "static") scrollParent.style.position = "relative";
+      this.scrollParent.add(scrollParent);
+      this.eventsList.forEach((event) => {
+        scrollParent.addEventListener(event, loadFn.bind(this));
+      })
     }
-    removeImage(el){
-        const index = this.images.findIndex(item=>item.el === el);
-        this.images.splice(index,1);
-    }
-    initListener(scrollParent){
-        if(!this.scrollParent.has(scrollParent)){
-            const position = getStyle(scrollParent, "position");
-            if (position==="" || position === "static") scrollParent.style.position = "relative";
-            this.scrollParent.add(scrollParent);
-            this.eventsList.forEach((event)=>{
-                scrollParent.addEventListener(event,this.loadImage.bind(this));
-            })
-        }
-    }
-    loadImage(){
-        let images=this.images;
+  }
 
-        // refresh images
-        for(let i = 0;i < images.length;i++){
-            const scrollParent=images[i].scrollParent;
-            const el=images[i].el;
-            // ready to enter the screen but still "options.offset" px to go,load the img
-            if(checkInView(el,scrollParent,this.options.offset)){
-                const src=el.dataset.src;
-                const placeholder=el.dataset.placeholder;
-                if(!src){
-                    console.error(`${el} has no attribute 'data-src'!`);
-                }
-                if(placeholder){
-                    let tmpImg=new Image();
-                    tmpImg.src=src;
-                    el.src=placeholder;
-                    tmpImg.onload=()=>{
-                        el.src=src;
-                        tmpImg=null;
-                    }
-                }
-                else{
-                    el.src=src;
-                }
-                images.splice(i--,1);
-            }
+  loadImage() {
+    let images = this.images;
+    // refresh images
+    for (let i = 0; i < images.length; i++) {
+      const scrollParent = images[i].scrollParent;
+      const el = images[i].el;
+      // ready to enter the screen but still "options.offset" px to go,load the img
+      if (checkInView(el, scrollParent, this.options.offset)) {
+        const src = el.dataset.src;
+        const placeholder = el.dataset.placeholder;
+        if (!src) {
+          console.error(`${el} has no attribute 'data-src'!`);
         }
+        if (placeholder) {
+          let tmpImg = new Image();
+          tmpImg.src = src;
+          el.src = placeholder;
+          tmpImg.onload = () => {
+            el.src = src;
+            tmpImg = null;
+          }
+        }
+        else {
+          el.src = src;
+        }
+        images.splice(i--, 1);
+      }
     }
+  }
 }
 
 export default LazyImage;

src/utils.js

@@ -1,69 +0,92 @@
-const getStyle=(el,prop)=>{
-    if(!el || el===window) return null;
-    let value=(getComputedStyle?
-        getComputedStyle(el,null).getPropertyValue(prop):el.style[prop])||el.style[prop];
-    return value;
+const getStyle = function (el, prop) {
+  if (!el || el === window) return null;
+  let value = (getComputedStyle ?
+    getComputedStyle(el, null).getPropertyValue(prop) : el.style[prop]) || el.style[prop];
+  return value;
 };
 
-const checkOverflow=(el)=>{
-    let info=getStyle(el,"overflow")+getStyle(el,"overflow-y")+getStyle(el,"overflow-x");
-    return /scroll|auto/.test(info);
+const checkOverflow = function (el) {
+  let info = getStyle(el, "overflow") + getStyle(el, "overflow-y") + getStyle(el, "overflow-x");
+  return /scroll|auto/.test(info);
 };
 
-const getScrollParent=(el)=>{
-    if(!(el instanceof HTMLElement)) {
-        console.error(`${el} is not an HTMLElement`);
-        return null;
-    }
-    let parent=el;
-    while(parent){
-        if(parent===document.body || parent===document.documentElement) break;
-        if(!parent.parentNode) return null;
+const getScrollParent = (el) => {
+  if (!(el instanceof HTMLElement)) {
+    console.error(`${el} is not an HTMLElement`);
+    return null;
+  }
+  let parent = el;
+  while (parent) {
+    if (parent === document.body || parent === document.documentElement) break;
+    if (!parent.parentNode) return null;
 
-        if(checkOverflow(parent)) return parent;
-        parent=parent.parentNode;
-    }
-    return window;
+    if (checkOverflow(parent)) return parent;
+    parent = parent.parentNode;
+  }
+  return window;
 };
 
-const checkInView=(el,scrollParent = window,offset = 0)=>{
-    let clientH,clientW;
-    let offsetTop=0,offsetLeft=0;
-    if(scrollParent === window) {
-        clientH = document.documentElement.clientHeight || document.body.clientHeight;
-        clientW = document.documentElement.clientWidth || document.body.clientWidth;
+const checkInView = function (el, scrollParent = window, offset = 0) {
+  let clientH, clientW;
+  let offsetTop = 0, offsetLeft = 0;
+  if (scrollParent === window) {
+    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
+    // 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 {
+    let scrollTop = scrollParent.scrollTop;
+    let scrollLeft = scrollParent.scrollLeft;
+    let width = el.offsetWidth, height = el.offsetHeight;
+    clientH = scrollParent.clientHeight;
+    clientW = scrollParent.clientWidth;
+    while (el != scrollParent && el != null) {
+      let borderWidth = parseInt(getStyle(el, "border-width"));
+      offsetTop += el.offsetTop + borderWidth;
+      offsetLeft += el.offsetLeft + borderWidth;
+      el = el.offsetParent;
     }
-    else {
-        let scrollTop = scrollParent.scrollTop;
-        let scrollLeft = scrollParent.scrollLeft;
-        let width=el.offsetWidth,height=el.offsetHeight;
-        clientH = scrollParent.clientHeight;
-        clientW=scrollParent.clientWidth;
-        while(el!=scrollParent && el!=null){
-            let borderWidth=parseInt(getStyle(el,"border-width"));
-            offsetTop+=el.offsetTop+borderWidth;
-            offsetLeft+=el.offsetLeft+borderWidth;
-            el=el.offsetParent;
-        }
-        return scrollTop+clientH>offsetTop-offset && offsetTop+height+offset>scrollTop
-            && scrollLeft+clientW>offsetLeft-offset && offsetLeft+width+offset>scrollLeft
+    return scrollTop + clientH > offsetTop - offset && offsetTop + height + offset > scrollTop
+      && scrollLeft + clientW > offsetLeft - offset && offsetLeft + width + offset > scrollLeft
 
+  }
+}
+
+const throttle = function (fn, interval) {
+  let begin = 0;
+  if (!interval || interval <= 0) return fn;
+  return function () {
+    const now = Date.now();
+    if (now - begin > interval) {
+      begin = now;
+      fn.apply(this, arguments);
     }
+  }
 }
 
+const debounce = function (fn, idle) {
+  let setTm;
+  if (!idle || idle <= 0) return fn;
+  return function () {
+    clearTimeout(setTm);
+    setTm = setTimeout(fn.bind(this, ...arguments), idle);
+  }
+}
+
 export {
-    getScrollParent,
-    getStyle,
-    checkOverflow,
-    checkInView
+  getScrollParent,
+  getStyle,
+  checkOverflow,
+  checkInView,
+  throttle,
+  debounce
 }
 

test/utils.spec.js

 import {expect} from 'chai';
 import {
-    getScrollParent,
-    getStyle,
-    checkOverflow,
-    checkInView
+  getScrollParent,
+  getStyle,
+  checkOverflow,
+  checkInView,
+  throttle,
+  debounce
 } from '../src/utils';
 
-import {createTestDiv,clearBody} from './tools';
+import {createTestDiv, clearBody} from './tools';
 
-describe('Function getStyle',()=>{
-    it('@Param el is window',()=>{
-        expect(getStyle(window)).to.be.equal(null);
-    })
+describe('Function getStyle', () => {
+  it('@Param el is window', () => {
+    expect(getStyle(window)).to.be.equal(null);
+  })
 
-    it('@param el and prop are undefined',()=>{
-        expect(getStyle()).to.be.equal(null);
-    })
+  it('@param el and prop are undefined', () => {
+    expect(getStyle()).to.be.equal(null);
+  })
 
-    it('@Param el is an element with overflow',()=>{
-        let div=createTestDiv();
-        div.style.overflow='scroll';
-        expect(getStyle(div,'overflow')).to.be.equal('scroll');
-    })
+  it('@Param el is an element with overflow', () => {
+    let div = createTestDiv();
+    div.style.overflow = 'scroll';
+    expect(getStyle(div, 'overflow')).to.be.equal('scroll');
+  })
 
-    it('@Param el is an element with prop whose value is empty',()=>{
-        let div=createTestDiv();
-        expect(getStyle(div,'overflow')).to.be.empty;
-    })
+  it('@Param el is an element with prop whose value is empty', () => {
+    let div = createTestDiv();
+    expect(getStyle(div, 'overflow')).to.be.empty;
+  })
 
-    it('@Param el is an element with undefined prop',()=>{
-        let div=createTestDiv();
-        expect(getStyle(div)).to.be.equal(undefined);
-    })
+  it('@Param el is an element with undefined prop', () => {
+    let div = createTestDiv();
+    expect(getStyle(div)).to.be.equal(undefined);
+  })
 });
 
-describe('Function checkOverflow',()=>{
-    let testDiv=createTestDiv();
+describe('Function checkOverflow', () => {
+  let testDiv = createTestDiv();
 
-    it('@Param el is an element with overflow "scroll"',()=>{
-        testDiv.style.overflow='scroll';
-        expect(checkOverflow(testDiv)).to.be.ok;
-    })
+  it('@Param el is an element with overflow "scroll"', () => {
+    testDiv.style.overflow = 'scroll';
+    expect(checkOverflow(testDiv)).to.be.ok;
+  })
 
-    it('@Param el is an element with overflow "auto"',()=>{
-        testDiv.style.overflow='auto';
-        expect(checkOverflow(testDiv)).to.be.ok;
-    })
+  it('@Param el is an element with overflow "auto"', () => {
+    testDiv.style.overflow = 'auto';
+    expect(checkOverflow(testDiv)).to.be.ok;
+  })
 
-    it('@Param el is an element with overflow "hidden"',()=>{
-        testDiv.style.overflow='hidden';
-        expect(checkOverflow(testDiv)).to.not.be.ok;
-    })
+  it('@Param el is an element with overflow "hidden"', () => {
+    testDiv.style.overflow = 'hidden';
+    expect(checkOverflow(testDiv)).to.not.be.ok;
+  })
 
-    it('@Param el is an element without overflow',()=>{
-        testDiv.style.overflow="";
-        expect(checkOverflow(testDiv)).to.not.be.ok;
-    })
+  it('@Param el is an element without overflow', () => {
+    testDiv.style.overflow = "";
+    expect(checkOverflow(testDiv)).to.not.be.ok;
+  })
 });
 
-describe('Function getScrollParent',()=>{
-    afterEach(()=>{
-        clearBody();
-    })
+describe('Function getScrollParent', () => {
+  afterEach(() => {
+    clearBody();
+  })
 
-    it('@Param el is a div whose parent is body',()=>{
-        let div=createTestDiv();
-        document.body.appendChild(div);
-        expect(getScrollParent(div)).to.be.equal(window);
-    })
+  it('@Param el is a div whose parent is body', () => {
+    let div = createTestDiv();
+    document.body.appendChild(div);
+    expect(getScrollParent(div)).to.be.equal(window);
+  })
 
-    it('@Param el is a div with a child div',()=>{
-        let parent=document.createElement('div');
-        parent.className='parent';
-        parent.style.cssText='overflow:scroll;';
-        let child=document.createElement('div');
-        child.className='child';
-        parent.appendChild(child);
-        document.body.appendChild(parent);
-        expect(getScrollParent(child).className).to.be.equal('parent');
-    })
+  it('@Param el is a div with a child div', () => {
+    let parent = document.createElement('div');
+    parent.className = 'parent';
+    parent.style.cssText = 'overflow:scroll;';
+    let child = document.createElement('div');
+    child.className = 'child';
+    parent.appendChild(child);
+    document.body.appendChild(parent);
+    expect(getScrollParent(child).className).to.be.equal('parent');
+  })
 
-    it('@Param el is a div without parents',()=>{
-        let div=document.createElement('div');
-        expect(getScrollParent(div)).to.be.equal(null);
-    })
+  it('@Param el is a div without parents', () => {
+    let div = document.createElement('div');
+    expect(getScrollParent(div)).to.be.equal(null);
+  })
 
-    it('@Param el is body or documentElement',()=>{
-        expect(getScrollParent(document.body)).to.be.equal(window);
-        expect(getScrollParent(document.documentElement)).to.be.equal(window);
-    })
+  it('@Param el is body or documentElement', () => {
+    expect(getScrollParent(document.body)).to.be.equal(window);
+    expect(getScrollParent(document.documentElement)).to.be.equal(window);
+  })
 });
 
-describe('Function checkInView',()=>{
-    afterEach(()=>{
-        clearBody();
-    })
-    it('@Param el is a 100*100 div in the visible area whose parent is body ',()=>{
-        let div=createTestDiv();
-        document.body.appendChild(div);
-        expect(checkInView(div)).to.be.ok;
-    })
+describe('Function checkInView', () => {
+  afterEach(() => {
+    clearBody();
+  })
+  it('@Param el is a 100*100 div in the visible area whose parent is body ', () => {
+    let div = createTestDiv();
+    document.body.appendChild(div);
+    expect(checkInView(div)).to.be.ok;
+  })
 
-    it('@Param el is a 100*100 div outside the visible area whose parent is body ',()=>{
-        let div=createTestDiv();
-        div.style.cssText+='margin-top:-200px;';
-        document.body.appendChild(div);
-        expect(checkInView(div)).to.not.be.ok;
-    })
+  it('@Param el is a 100*100 div outside the visible area whose parent is body ', () => {
+    let div = createTestDiv();
+    div.style.cssText += 'margin-top:-200px;';
+    document.body.appendChild(div);
+    expect(checkInView(div)).to.not.be.ok;
+  })
 
-    it('@Param el is a 100*100 div outside the visible whose parent is another div',()=>{
-        let parent=createTestDiv();
-        parent.style.cssText='width:300px;height:300px;overflow:scroll;';
-        let div=createTestDiv();
-        div.style.marginTop='-300px';
-        parent.appendChild(div);
-        document.body.appendChild(parent);
-        expect(checkInView(div,parent)).to.not.be.ok;
-        div.style.cssText+='margin-top:0px;margin-left:-110px;';
-        expect(checkInView(div,parent)).to.not.be.ok;
-    })
+  it('@Param el is a 100*100 div outside the visible whose parent is another div', () => {
+    let parent = createTestDiv();
+    parent.style.cssText = 'width:300px;height:300px;overflow:scroll;';
+    let div = createTestDiv();
+    div.style.marginTop = '-300px';
+    parent.appendChild(div);
+    document.body.appendChild(parent);
+    expect(checkInView(div, parent)).to.not.be.ok;
+    div.style.cssText += 'margin-top:0px;margin-left:-110px;';
+    expect(checkInView(div, parent)).to.not.be.ok;
+  })
 })
+
+describe('Function throttle', () => {
+  it('Normal situation',()=>{
+    let count=0;
+    let fn=throttle(()=>{
+      count++;
+    },200);
+    fn();
+    expect(count).to.be.equal(1);
+    fn();fn();
+    expect(count).to.be.equal(1);
+    setTimeout(()=>{
+      fn();
+      expect(count).to.be.equal(2);
+    },200)
+  })
+
+  it('@Param interval is not more than 0 or not number',()=>{
+    let count=0;
+    let fn=()=>{
+      count++;
+    };
+    let lastFn=throttle(fn,-1);
+    expect(lastFn === fn).to.be.equal(true);
+    lastFn();
+    expect(count).to.be.equal(1);
+    lastFn();
+    expect(count).to.be.equal(2);
+
+    count=0;
+    lastFn=throttle(fn);
+    expect(lastFn === fn).to.be.equal(true);
+    lastFn();
+    expect(count).to.be.equal(1);
+    lastFn();
+    expect(count).to.be.equal(2);
+  })
+})
+
+describe('Function debounce',()=>{
+  it('Normal situation',()=>{
+    let count=0;
+    let fn=debounce(()=>{
+      count++;
+    },200);
+    fn();
+    expect(count).to.be.equal(0);
+    setTimeout(()=>{
+      expect(count).to.be.equal(1);
+      fn();
+      expect(count).to.be.equal(1);
+    },200);
+  })
+
+  it('@Param idle is not more than 0 or not number',()=>{
+    let count=0;
+    let fn=()=>{
+      count++;
+    };
+    let lastFn=debounce(fn,-1);
+    expect(lastFn === fn).to.be.equal(true);
+    lastFn();
+    expect(count).to.be.equal(1);
+
+    count=0;
+    lastFn=debounce(fn);
+    expect(lastFn === fn).to.be.equal(true);
+    lastFn();
+    expect(count).to.be.equal(1);
+  })
+})

No alert changes

Improved metrics

Total package byte prevSize

9195850

increased by0.03%

Lines of code

625

increased by18.15%

Number of lines in readme file

49

increased by4.26%

No dependency changes