w-ui/lib/lazy-image/index.js

A Vue.js 2.0 UI Toolkit for mobile

module.exports=function(e){function t(a){if(n[a])return n[a].exports;var r=n[a]={i:a,l:!1,exports:{}};return e[a].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,a){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:a})},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="",t(t.s=188)}({0:function(e,t){e.exports=function(e,t,n,a,r,o){var i,s=e=e||{},d=typeof e.default;"object"!==d&&"function"!==d||(i=e,s=e.default);var l="function"==typeof s?s.options:s;t&&(l.render=t.render,l.staticRenderFns=t.staticRenderFns,l._compiled=!0),n&&(l.functional=!0),r&&(l._scopeId=r);var c;if(o?(c=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),a&&a.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},l._ssrRegister=c):a&&(c=a),c){var u=l.functional,f=u?l.render:l.beforeCreate;u?(l._injectStyles=c,l.render=function(e,t){return c.call(t),f(e,t)}):l.beforeCreate=f?[].concat(f,c):[c]}return{esModule:i,exports:s,options:l}}},1:function(e,t,n){"use strict";function a(e,t){var n=e[1]||"",a=e[3];if(!a)return n;if(t&&"function"==typeof btoa){var o=r(a);return[n].concat(a.sources.map(function(e){return"/*# sourceURL="+a.sourceRoot+e+" */"})).concat([o]).join("\n")}return[n].join("\n")}function r(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n=a(t,e);return t[2]?"@media "+t[2]+"{"+n+"}":n}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var a={},r=0;r<this.length;r++){var o=this[r][0];"number"==typeof o&&(a[o]=!0)}for(r=0;r<e.length;r++){var i=e[r];"number"==typeof i[0]&&a[i[0]]||(n&&!i[2]?i[2]=n:n&&(i[2]="("+i[2]+") and ("+n+")"),t.push(i))}},t}},188:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LazyImage=void 0;var a=n(189),r=function(e){return e&&e.__esModule?e:{default:e}}(a);t.LazyImage=r.default},189:function(e,t,n){"use strict";function a(e){d||n(190)}Object.defineProperty(t,"__esModule",{value:!0});var r=n(34),o=n.n(r);for(var i in r)"default"!==i&&function(e){n.d(t,e,function(){return r[e]})}(i);var s=n(192),d=!1,l=n(0),c=a,u=l(o.a,s.a,!1,c,"data-v-ad59bdda",null);u.options.__file="packages/lazy-image/src/lazyImage.vue",t.default=u.exports},190:function(e,t,n){var a=n(191);"string"==typeof a&&(a=[[e.i,a,""]]),a.locals&&(e.exports=a.locals);n(2)("aef86354",a,!1,{})},191:function(e,t,n){t=e.exports=n(1)(!1),t.push([e.i,"\n.lazy-image[data-v-ad59bdda] {\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n.lazy-image-placeholder[data-v-ad59bdda],\n.lazy-image-content[data-v-ad59bdda] {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-size: cover;\n  position: absolute;\n}\n.lazy-image-placeholder svg[data-v-ad59bdda],\n.lazy-image-content svg[data-v-ad59bdda] {\n  width: 30%;\n}\n.lazy-image-fade-in-pre .lazy-image-content[data-v-ad59bdda] {\n  opacity: 0;\n}\n.lazy-image-fade-in .lazy-image-content[data-v-ad59bdda] {\n  opacity: 1;\n  -webkit-transition: opacity 0.6s;\n  transition: opacity 0.6s;\n}\n.lazy-image.bordered[data-v-ad59bdda]::after {\n  content: '';\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  border: 1px solid #d8d4d4;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n}\n[data-dpr='1'] .lazy-image.bordered[data-v-ad59bdda]::after {\n  border-color: #efeeee;\n}\n[data-dpr='2'] .lazy-image.bordered[data-v-ad59bdda]::after {\n  border-color: #e8e5e5;\n}\n[data-dpr='3'] .lazy-image.bordered[data-v-ad59bdda]::after {\n  border-color: #e0dddd;\n}\n",""])},192:function(e,t,n){"use strict";var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"el",class:["lazy-image",e.classVal,{bordered:e.bordered}]},[n("div",{staticClass:"lazy-image-placeholder"},[n("svg",{staticClass:"icon",attrs:{t:"1509443043258",viewBox:"0 0 1260 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"3114","xmlns:xlink":"http://www.w3.org/1999/xlink",width:"246.09375",height:"200"}},[n("path",{attrs:{d:"M1141.949282 0H118.262145A118.262145 118.262145 0 0 0 0 118.262145v787.47571a118.262145 118.262145 0 0 0 118.262145 118.262145H1141.949282a118.262145 118.262145 0 0 0 118.262145-118.262145V118.262145A118.262145 118.262145 0 0 0 1141.949282 0z m19.710357 785.285671l-247.161625-329.444547s-14.39169-26.593339-64.762603-26.593339c-57.253896 0-74.46135 25.967614-74.461351 25.967614l-216.501069 333.824625a46.61656 46.61656 0 0 1-40.672166 22.526123 54.750993 54.750993 0 0 1-44.739383-22.526123l-113.882065-130.150931a99.177513 99.177513 0 0 0-66.952643-38.482127 105.434769 105.434769 0 0 0-69.142683 42.862206l-125.145126 156.431409V139.223954a39.420715 39.420715 0 0 1 39.733577-39.420715h984.266423a39.420715 39.420715 0 0 1 39.420714 39.420715V785.285671zM570.974641 354.473572a139.536816 139.536816 0 1 1-139.536816-139.536817 139.536816 139.536816 0 0 1 139.536816 139.536817z",fill:"#EEEEEE","p-id":"3115"}})])]),e._v(" "),n("div",{staticClass:"lazy-image-content",style:e.styleVal})])},r=[];a._withStripped=!0;var o={render:a,staticRenderFns:r};t.a=o},2:function(e,t,n){function a(e){for(var t=0;t<e.length;t++){var n=e[t],a=c[n.id];if(a){a.refs++;for(var r=0;r<a.parts.length;r++)a.parts[r](n.parts[r]);for(;r<n.parts.length;r++)a.parts.push(o(n.parts[r]));a.parts.length>n.parts.length&&(a.parts.length=n.parts.length)}else{for(var i=[],r=0;r<n.parts.length;r++)i.push(o(n.parts[r]));c[n.id]={id:n.id,refs:1,parts:i}}}}function r(){var e=document.createElement("style");return e.type="text/css",u.appendChild(e),e}function o(e){var t,n,a=document.querySelector("style["+m+'~="'+e.id+'"]');if(a){if(v)return h;a.parentNode.removeChild(a)}if(b){var o=p++;a=f||(f=r()),t=i.bind(null,a,o,!1),n=i.bind(null,a,o,!0)}else a=r(),t=s.bind(null,a),n=function(){a.parentNode.removeChild(a)};return t(e),function(a){if(a){if(a.css===e.css&&a.media===e.media&&a.sourceMap===e.sourceMap)return;t(e=a)}else n()}}function i(e,t,n,a){var r=n?"":a.css;if(e.styleSheet)e.styleSheet.cssText=y(t,r);else{var o=document.createTextNode(r),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(o,i[t]):e.appendChild(o)}}function s(e,t){var n=t.css,a=t.media,r=t.sourceMap;if(a&&e.setAttribute("media",a),g.ssrId&&e.setAttribute(m,t.id),r&&(n+="\n/*# sourceURL="+r.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}var d="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!d)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var l=n(3),c={},u=d&&(document.head||document.getElementsByTagName("head")[0]),f=null,p=0,v=!1,h=function(){},g=null,m="data-vue-ssr-id",b="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,n,r){v=n,g=r||{};var o=l(e,t);return a(o),function(t){for(var n=[],r=0;r<o.length;r++){var i=o[r],s=c[i.id];s.refs--,n.push(s)}t?(o=l(e,t),a(o)):o=[];for(var r=0;r<n.length;r++){var s=n[r];if(0===s.refs){for(var d=0;d<s.parts.length;d++)s.parts[d]();delete c[s.id]}}}};var y=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},3:function(e,t,n){"use strict";e.exports=function(e,t){for(var n=[],a={},r=0;r<t.length;r++){var o=t[r],i=o[0],s=o[1],d=o[2],l=o[3],c={id:e+":"+r,css:s,media:d,sourceMap:l};a[i]?a[i].parts.push(c):n.push(a[i]={id:i,parts:[c]})}return n}},34:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a={},r=[];setTimeout(function(){function e(){var e=window.innerHeight,t=2*e,n=[];r.forEach(function(e){var a=e.rect();a.bottom>0&&a.top<t&&n.push([e,2e3*a.top+a.left])}),n.sort(function(e,t){return t[1]-e[1]}),a=n.map(function(e){return e[0]})}var t=void 0,n=function(){t&&clearTimeout(t),t=setTimeout(function(){t=null,e()},100)};window.addEventListener("scroll",n),setInterval(n,1e3);var a=[],o=0;setInterval(function(){o<4&&a.length>0&&(o++,a.pop().load(function(){o--}))},30),setInterval(function(){if(0===o&&r.length>0){o++;for(var e=0;e<r.length;e++)if(r[e].rect().height>0)return void r[e].load(function(){o--})}},1e3)},100),t.default={name:"w-lazyimage",props:{src:{type:String,default:""},bordered:{type:Boolean,default:!1}},data:function(){return{styleVal:{},classVal:"",loaded:!1}},watch:{src:function(e,t){e!==t&&(this.styleVal={},this.classVal="",this.loaded=!1,a[e]?this.loadImmediate():r.push(this))}},methods:{rect:function(){return this.$refs.el.getBoundingClientRect()},load:function(e){var t=this;this.loaded=!0;var n=r.indexOf(this);n>-1&&r.splice(n,1);var o=new Image;o.onload=function(){a[t.src]=!0,t.classVal=["lazy-image-fade-in-pre"],setTimeout(function(){t.classVal=["lazy-image-fade-in"]},10),setTimeout(function(){t.classVal=[]},300),t.styleVal={backgroundImage:"url("+t.src+")"},e()},o.onerror=function(){e()},o.src=this.src},loadImmediate:function(){this.styleVal={backgroundImage:"url("+this.src+")"},this.classVal=["lazy-image-fade-in"]}},mounted:function(){a[this.src]?this.loadImmediate():r.push(this)},destroyed:function(){if(!this.loaded){var e=r.indexOf(this);e>-1&&r.splice(e,1)}}}}});