UNPKG

react-lazyloadcomponent-image

Version:

```javascript render() { const { images, list } = this.state; return ( <div> <ReactLazyLoadComponent> { images.map(item => { return <div style={ { textAlign: 'center' } } key={ item }><img data-src={ item }

1 lines 3.44 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]=void 0;var _react=_interopRequireWildcard(require("react")),_reactDom=require("react-dom");require("intersection-observer"),require("./ReactLazyLoadComponent.css");function _getRequireWildcardCache(){if("function"!=typeof WeakMap)return null;var a=new WeakMap;return _getRequireWildcardCache=function(){return a},a}function _interopRequireWildcard(a){if(a&&a.__esModule)return a;if(null===a||"object"!==_typeof(a)&&"function"!=typeof a)return{default:a};var b=_getRequireWildcardCache();if(b&&b.has(a))return b.get(a);var c={},d=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var e in a)if(Object.prototype.hasOwnProperty.call(a,e)){var f=d?Object.getOwnPropertyDescriptor(a,e):null;f&&(f.get||f.set)?Object.defineProperty(c,e,f):c[e]=a[e]}return c["default"]=a,b&&b.set(a,c),c}function _typeof(a){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}function _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),a}function _possibleConstructorReturn(a,b){return b&&("object"===_typeof(b)||"function"==typeof b)?b:_assertThisInitialized(a)}function _assertThisInitialized(a){if(void 0===a)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return a}function _getPrototypeOf(a){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(a){return a.__proto__||Object.getPrototypeOf(a)},_getPrototypeOf(a)}function _inherits(a,b){if("function"!=typeof b&&null!==b)throw new TypeError("Super expression must either be null or a function");a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,writable:!0,configurable:!0}}),b&&_setPrototypeOf(a,b)}function _setPrototypeOf(a,b){return _setPrototypeOf=Object.setPrototypeOf||function(a,b){return a.__proto__=b,a},_setPrototypeOf(a,b)}var ReactLazyLoadComponent=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"componentDidMount",value:function componentDidMount(){this.io=this.IointersectionObserver(),this.el=(0,_reactDom.findDOMNode)(this),this.observe()}},{key:"componentDidUpdate",value:function componentDidUpdate(){this.observe()}},{key:"IointersectionObserver",value:function IointersectionObserver(){var a=new IntersectionObserver(function(b){b.forEach(function(b){b.isIntersecting&&(b.target.classList.add("inner-show"),b.target.src=b.target.dataset.src,delete b.target.dataset.src,a.unobserve(b.target))})},{root:this.el});return a}},{key:"observe",value:function observe(){var a=this,b=this.el.querySelectorAll("[data-src]");b.length&&Array.from(b).forEach(function(b){a.io.observe(b)})}},{key:"render",value:function render(){var a=this.props.children;return _react["default"].createElement("div",null,a)}}]),b}(_react.Component),_default=ReactLazyLoadComponent;exports["default"]=_default;