UNPKG

react-preload-image

Version:

Preload and fade in an image. Optional support for lazy loading.

6 lines 3.46 kB
/*! * react-preload-image v1.0.6 * MIT Licensed */ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactPreloadImage=t(require("react")):e.ReactPreloadImage=t(e.React)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){e.exports=r(1)},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=r(2),n=r.n(o),i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e};var s=function(e){function t(r){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var o=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,e.call(this,r));return o.state={loaded:!1,src:null},o}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),t.prototype.componentDidMount=function(){this.props.lazy&&"IntersectionObserver"in window?this.setObserver():this.setPreloader()},t.prototype.setObserver=function(){var e=this;this.observer=new IntersectionObserver(function(t){t.forEach(function(t){t.isIntersecting&&(e.setPreloader(),e.observer.disconnect())})}),this.observer.observe(this.el)},t.prototype.setPreloader=function(){var e=this;this.preloader=new Image,this.preloader.onload=function(){return e.setState({loaded:!0,src:"url("+e.props.src+")"})},this.preloader.src=this.props.src},t.prototype.componentWillUnmount=function(){this.observer&&this.observer.disconnect(),this.preloader&&(this.preloader.onload=null)},t.prototype.render=function(){var e=this,t=this.props.innerStyle&&this.props.innerStyle.backgroundSize?this.props.innerStyle.backgroundSize:"cover",r=this.props.innerStyle&&this.props.innerStyle.backgroundPosition?this.props.innerStyle.backgroundPosition:"center",o=this.props.innerStyle&&this.props.innerStyle.backgroundRepeat?this.props.innerStyle.backgroundRepeat:"no-repeat";return n.a.createElement("div",{className:this.props.className,style:i({},this.props.style),ref:function(t){return e.el=t}},n.a.createElement("div",{style:{position:"absolute",top:0,right:0,bottom:0,left:0,backgroundImage:this.state.src,backgroundSize:t,backgroundPosition:r,backgroundRepeat:o,transition:"opacity "+(this.props.duration||"300ms")+" "+(this.props.ease||"cubic-bezier(0.215, 0.61, 0.355, 1)"),opacity:this.state.loaded?1:0}}),this.props.children)},t}(n.a.Component);t.default=s},function(t,r){t.exports=e}]).default}); //# sourceMappingURL=react-preload-image.min.js.map