index.js

"use strict";function _classCallCheck(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,n){for(var t=0;t<n.length;t++){var i=n[t];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function _createClass(e,n,t){return n&&_defineProperties(e.prototype,n),t&&_defineProperties(e,t),e}Object.defineProperty(exports,"__esModule",{value:!0});var DEFAULT_OBSERVER_OPTIONS={rootMargin:"0px",threshold:0},Lazy=function(){function t(e,n){_classCallCheck(this,t),this.vue=e,this.observer=null,this.ListenerQueue=[],this.observerOptions=n||DEFAULT_OBSERVER_OPTIONS,this.init()}return _createClass(t,[{key:"init",value:function(){this.observer=new IntersectionObserver(this.observerHandler.bind(this),this.observerOptions)}},{key:"add",value:function(e,n,t){var i=this;this.ListenerQueue.push({loaded:!1,el:e,binding:n,vnode:t}),this.vue.nextTick(function(){i.observer&&(i.observer.unobserve(e),i.observer.observe(e))})}},{key:"observerHandler",value:function(e){var a=this;e.forEach(function(i){i.isIntersecting&&a.ListenerQueue.forEach(function(e){if(e.el===i.target){if(e.loaded)return a.observer.unobserve(e.el);if(e.loaded=!0,"bgimg"===e.binding.arg){var n=new Image;n.src=e.binding.value,n.onload=function(){e.el.style.backgroundImage="url(".concat(e.binding.value,")"),e.el.style.opacity=1},n.onerror=function(){}}else{var t=e.el.querySelector("img");if(!t)throw"Please make sure that you have set img html inside v-lazy directive. [more details] https://github.com/YasinChan/vue-simple-lazyload/blob/master/README.md";t.onload=function(){t.style.opacity=1,e.el.style.backgroundColor="transparent"},t.src=e.binding.value,t.onerror=function(){}}}})})}}]),t}(),script={name:"ImgLazy",props:{imgUrl:{default:"",type:String},bgColor:{default:""},lazyloadContainer:{default:"",type:String},lazyloadImg:{default:"",type:String},placeholderFigure:{default:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII="}}};function normalizeComponent(e,n,t,i,a,o,r,s,l,d){"boolean"!=typeof r&&(l=s,s=r,r=!1);var u,c="function"==typeof t?t.options:t;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,a&&(c.functional=!0)),i&&(c._scopeId=i),o?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=u):n&&(u=r?function(e){n.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){n.call(this,s(e))}),u)if(c.functional){var _=c.render;c.render=function(e,n){return u.call(n),_(e,n)}}else{var A=c.beforeCreate;c.beforeCreate=A?[].concat(A,u):[u]}return t}var HEAD,isOldIE="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function createInjector(e){return function(e,n){return addStyle(e,n)}}var styles={};function addStyle(e,n){var t=isOldIE?n.media||"default":e,i=styles[t]||(styles[t]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);var a=n.source;if(n.map&&(a+="\n/*# sourceURL="+n.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",n.media&&i.element.setAttribute("media",n.media),void 0===HEAD&&(HEAD=document.head||document.getElementsByTagName("head")[0]),HEAD.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(a),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{var o=i.ids.size-1,r=document.createTextNode(a),s=i.element.childNodes;s[o]&&i.element.removeChild(s[o]),s.length?i.element.insertBefore(r,s[o]):i.element.appendChild(r)}}}var __vue_script__=script,__vue_render__=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{directives:[{name:"lazy",rawName:"v-lazy",value:e.imgUrl,expression:"imgUrl"}],class:e.lazyloadContainer,style:{backgroundColor:e.bgColor}},[t("img",{class:e.lazyloadImg})])},__vue_staticRenderFns__=[],__vue_inject_styles__=function(e){e&&e("data-v-6b7395de_0",{source:"\ndiv[data-v-6b7395de] {\n  transition: background-color .5s ease-in-out .3s;\n  width: 250px;\n  height: 150px;\n}\nimg[data-v-6b7395de] {\n  transition: opacity .5s ease-in-out .3s;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["/Users/yasinchan/Code/project/vue-simple-lazyload/src/ImgLazy.vue"],names:[],mappings:";AAgCA;EACA,gDAAA;EACA,YAAA;EACA,aAAA;AACA;AACA;EACA,uCAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;AACA",file:"ImgLazy.vue",sourcesContent:["<template>\n  <div :class=\"lazyloadContainer\" v-lazy=\"imgUrl\" :style=\"{ backgroundColor: bgColor }\">\n    <img :class=\"lazyloadImg\"/>\n  </div>\n</template>\n<script>\n\nexport default {\n  name: 'ImgLazy',\n  props: {\n    imgUrl: {\n      default: '',\n      type: String\n    },\n    bgColor: {\n      default: ''\n    },\n    lazyloadContainer: {\n      default: '',\n      type: String\n    },\n    lazyloadImg: {\n      default: '',\n      type: String\n    },\n    placeholderFigure: {\n      default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII='\n    }\n  }\n}\n<\/script>\n<style scoped>\ndiv {\n  transition: background-color .5s ease-in-out .3s;\n  width: 250px;\n  height: 150px;\n}\nimg {\n  transition: opacity .5s ease-in-out .3s;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n}\n</style>\n"]},media:void 0})},__vue_scope_id__="data-v-6b7395de",__vue_module_identifier__=void 0,__vue_is_functional_template__=!(__vue_render__._withStripped=!0),__vue_component__=normalizeComponent({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},__vue_inject_styles__,__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,!1,createInjector,void 0,void 0),VueLazy={install:function(e,n){var t=new Lazy(e,1<arguments.length&&void 0!==n?n:{});e.directive("lazy",{bind:t.add.bind(t),update:t.add.bind(t)})}},VueImgLazy={install:function(e,n){var t=new Lazy(e,1<arguments.length&&void 0!==n?n:{});e.directive("lazy",{bind:t.add.bind(t),update:t.add.bind(t)}),e.component(__vue_component__.name,__vue_component__)}};exports.VueImgLazy=VueImgLazy,exports.VueLazy=VueLazy;