lazy-load-img-component/libs/index.js

An simple image lazy load component based on react hooks and IntersectionObserver

module.exports=function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s=2)}([function(t,e){t.exports=require("react")},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0,e.default="\ndata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbkAAAEjCAAAAACKwiDRAAAABGdBTUEAALGPC/xhBQAAACBjSFJN\nAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN\nRQfkCQELFzDboq37AAAGmUlEQVR42u3dL2/cZhzA8V+3gYJEO+hIlUZSEBi1gdUUWKkFAwOFBUcm\nDXSgeNoLWF9AwWBfwE0KvEgdS6QrmFSQgIHTbHhSA6KSDuT+2E6TJq4z9/v4+yW1L9fTE33kP4/P\nubv1IQzZV10PwBqmHDXlqClHTTlqylFTjppy1JSjphw15agpR005aspRU46actSUo6YcNeWoKUdN\nOWrKUVOOmnLUlKOmHDXlqClHTTlqylFTjppy1JSjphw15agpR005aspRU46actSUo6YcNeWoKUdN\nOWrKUVOOmnLUlKOmHDXlqClHTTlqylFTjppy1JSjphw15agpR005aspRU46actSUo6YcNeWoKUdN\nOWrKUVOOmnLUlKOmHDXlqClHTTlqylFTjppy1JSjphw15agpR005aspRU46actSUo6YcNeWoKUdN\nOWrKUVOOmnLUlKPWA7mi6HoEN9I3XQ/ghpvsH80i7jx43PVAWu/Wh65HcJMVrw7mS4PhdteDabmk\n5Yrfp6uV4W7Xw2m3pI9zZbh4Oel6OO2WstxoWll91fV42i2RM5TJ4UnE5k5WeXCv+pzpOKn9ZRJy\nk/08IiJ/fXdYenQ8qz3tTVJyKewtx3/m86WjF6W523H9eUddD7TVEpCb/PVuuZxfdjCbdT3SVktA\nbv9daSUfX/zEQdcjbTW+3CSvrL5ZLm3Wn7nR9VBbjS93WF3Nl0e6rUHtmdmnXwwU/9zypLaeL4Cy\nuweVHwzK1y4nhyexdp98RYwvd3FPjmbl1e3VNvdyHKcRsRdPuVei+XvLi8t+HJTWdpZzveKnvdPT\ns8U/nmPfAuLL1U5E1kt7wN3hYLm882yxVPwyWz3l+Dcq3de/dj2Cz+3bv9+XV7+7V1rZuPf+n4iI\n2Hr6w/LB54sNLiIiTv79vuvfoFkJvMszel1aWR/WziCLfBprg9KGOHp1Wn3Gz8yLYgmcoTw+Ls3o\nHtVP/bOsdgK5V///e0w5/nEu4tndxdL6w0+e50+K2iYXx8wjXQLbXMRw/CaPiPXs8acn29PbdbnV\nDBBVEnKxu1vkEVeaV39kA5t1PfxGpSEXkSG3m88phePctbp/bmcJfQ+hd3Ibt889xLx6iZVrekKY\nbdUfedD1r9Is5nFucngSTS/1P6rfvfek69+mWcRrKMVo/s7O2hVmAed7cVA51D0cNniNLyCgXLG6\n16QFOioc8Tg3Wi2ejJq8wLPd1VnKUyoccJub7JfXnjSaxxWjs6uXDxtts19GPLmXldsXNpu+qV3k\nscFlC+K5ZfW+k8ZXi/EXXXDHOeaF/RsIJ0ffVFoLJxdrlbXNhq/Cjyd3v7K21fBV+PHktssb3WZ/\nd548uRiu6BrPCRIIKLei6zMccCYeEVG8PY7Y3OrvrjKocsbcW1qEctyUo6YcNeWoKUdNOWrKUVOO\nmnLUePehnFX0/t1xptxkWkRkd5h/ytFSxCvOxcH8NqKsz+/yEI9zC7goGt3inEhAufHqxr0isU/V\nvk5AufJnxU4bvwo+nlzlVtlEv7nlKvHk7CzlqPHkKhNw/N91NI8nV7kh/U7Xg+kuoFzphvSsx1dR\ngHKlKyc7XY+lw4hXvxaXv/p9qyxSLuLKH9CWblC5z+5sBk/eZoHHuTYqKv8g66ccWWxRP+WWgQl7\nLgeu53LgU5Rk5IrrvOEDBluWyKxgMouIuMbMnD8rSEKueDtfGFx9dl4EGy4NudU3dF6Djl4Kx7nS\nAW7W9Vj+v1KQK3/RKniCds2Y9zhXm132wyKPgH+S5cdLYZsbXPKzIo+IyBO8LzMFuUsqFnvS9OhS\nkCudTw5qu8XVITC5A2AKcqXdZe3L3pPjKpWE3PZgvtCn2xtSOLeM2I5JzAbnzyCzvMmrMUpD7go3\npSS3NSaxt7y4jXMLyZS4XDYXS3AqnsQV50sr8thIb1/ZB7lUS3xvmXDKUVOOmnLUlKOmHDXlqClH\nTTlqylFTjppy1JSjphw15agpR005aspRU46actSUo6YcNeWoKUdNOWrKUVOOmnLUlKOmHDXlqClH\nTTlqylFTjppy1JSjphw15agpR005aspRU46actSUo6YcNeWoKUdNOWrKUVOOmnLUlKOmHDXlqClH\nTTlqylFTjppy1JSjphw15agpR005aspRU46actSUo6YcNeWoKUdNOWrKUVOOmnLUlKOmHDXlqClH\nTTlqylFTjppy1JSjphw15agpR005aspRU46actSUo6YcNeWoKUdNOWrKUVOOmnLUlKP2H2737oaK\n6rVQAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA5LTAxVDExOjIzOjQ4KzAwOjAwONAQEgAAACV0\nRVh0ZGF0ZTptb2RpZnkAMjAyMC0wOS0wMVQxMToyMzo0OCswMDowMEmNqK4AAAAASUVORK5CYII=\n"},function(t,e,n){"use strict";n.r(e);var o=n(0),r=n.n(o),i=n(1),s=n.n(i),c=function(){return(c=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};n(3),e.default=function(t){var e=t.src,n=t.loadingImg,i=t.errorImg,u=t.style,h=t.options,l=void 0===h?{}:h,a=t.imgOptions,p=void 0===a?{}:a,d=Object(o.useRef)(null),f=Object(o.useState)(n||s.a),g=f[0],m=f[1];return Object(o.useEffect)((function(){var t=d.current,n=new IntersectionObserver((function(o){o.forEach((function(o){o.isIntersecting&&(m(e),t.onload=function(){n.unobserve(o.target)},t.onerror=function(){m(i||"")})}))}),l);return n.observe(t),function(){n.unobserve(t)}}),[i,l,e]),r.a.createElement("div",{style:c({width:"100px",height:"100px"},u)},r.a.createElement("img",c({src:g,alt:""},p,{ref:d,style:{width:"100%",height:"100%",cursor:"pointer"}})))}},function(t,e){!function(){"use strict";var t,e,n,o;function r(t){try{return t.defaultView&&t.defaultView.frameElement||null}catch(t){return null}}function i(t){this.time=t.time,this.target=t.target,this.rootBounds=l(t.rootBounds),this.boundingClientRect=l(t.boundingClientRect),this.intersectionRect=l(t.intersectionRect||{top:0,bottom:0,left:0,right:0,width:0,height:0}),this.isIntersecting=!!t.intersectionRect;var e=this.boundingClientRect,n=e.width*e.height,o=this.intersectionRect,r=o.width*o.height;this.intersectionRatio=n?Number((r/n).toFixed(4)):this.isIntersecting?1:0}function s(t,e){var n,o,r,i=e||{};if("function"!=typeof t)throw new Error("callback must be a function");if(i.root&&1!=i.root.nodeType)throw new Error("root must be an Element");this._checkForIntersections=(n=this._checkForIntersections.bind(this),o=this.THROTTLE_TIMEOUT,r=null,function(){r=r||setTimeout((function(){n(),r=null}),o)}),this._callback=t,this._observationTargets=[],this._queuedEntries=[],this._rootMarginValues=this._parseRootMargin(i.rootMargin),this.thresholds=this._initThresholds(i.threshold),this.root=i.root||null,this.rootMargin=this._rootMarginValues.map((function(t){return t.value+t.unit})).join(" "),this._monitoringDocuments=[],this._monitoringUnsubscribes=[]}function c(t,e,n,o){"function"==typeof t.addEventListener?t.addEventListener(e,n,o||!1):"function"==typeof t.attachEvent&&t.attachEvent("on"+e,n)}function u(t,e,n,o){"function"==typeof t.removeEventListener?t.removeEventListener(e,n,o||!1):"function"==typeof t.detatchEvent&&t.detatchEvent("on"+e,n)}function h(t){var e;try{e=t.getBoundingClientRect()}catch(t){}return e?(e.width&&e.height||(e={top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.right-e.left,height:e.bottom-e.top}),e):{top:0,bottom:0,left:0,right:0,width:0,height:0}}function l(t){return!t||"x"in t?t:{top:t.top,y:t.top,bottom:t.bottom,left:t.left,x:t.left,right:t.right,width:t.width,height:t.height}}function a(t,e){var n=e.top-t.top,o=e.left-t.left;return{top:n,left:o,height:e.height,width:e.width,bottom:n+e.height,right:o+e.width}}function p(t,e){for(var n=e;n;){if(n==t)return!0;n=d(n)}return!1}function d(e){var n=e.parentNode;return 9==e.nodeType&&e!=t?r(e):n&&11==n.nodeType&&n.host?n.host:n&&n.assignedSlot?n.assignedSlot.parentNode:n}"object"==typeof window&&("IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype?"isIntersecting"in window.IntersectionObserverEntry.prototype||Object.defineProperty(window.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return 0<this.intersectionRatio}}):(t=function(){for(var t=window.document,e=r(t);e;)e=r(t=e.ownerDocument);return t}(),e=[],o=n=null,s.prototype.THROTTLE_TIMEOUT=100,s.prototype.POLL_INTERVAL=null,s.prototype.USE_MUTATION_OBSERVER=!0,s._setupCrossOriginUpdater=function(){return n=n||function(t,n){o=t&&n?a(t,n):{top:0,bottom:0,left:0,right:0,width:0,height:0},e.forEach((function(t){t._checkForIntersections()}))}},s._resetCrossOriginUpdater=function(){o=n=null},s.prototype.observe=function(t){if(!this._observationTargets.some((function(e){return e.element==t}))){if(!t||1!=t.nodeType)throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:t,entry:null}),this._monitorIntersections(t.ownerDocument),this._checkForIntersections()}},s.prototype.unobserve=function(t){this._observationTargets=this._observationTargets.filter((function(e){return e.element!=t})),this._unmonitorIntersections(t.ownerDocument),0==this._observationTargets.length&&this._unregisterInstance()},s.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorAllIntersections(),this._unregisterInstance()},s.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},s.prototype._initThresholds=function(t){var e=t||[0];return Array.isArray(e)||(e=[e]),e.sort().filter((function(t,e,n){if("number"!=typeof t||isNaN(t)||t<0||1<t)throw new Error("threshold must be a number between 0 and 1 inclusively");return t!==n[e-1]}))},s.prototype._parseRootMargin=function(t){var e=(t||"0px").split(/\s+/).map((function(t){var e=/^(-?\d*\.?\d+)(px|%)$/.exec(t);if(!e)throw new Error("rootMargin must be specified in pixels or percent");return{value:parseFloat(e[1]),unit:e[2]}}));return e[1]=e[1]||e[0],e[2]=e[2]||e[0],e[3]=e[3]||e[1],e},s.prototype._monitorIntersections=function(e){var n,o,i,s,h=e.defaultView;h&&-1==this._monitoringDocuments.indexOf(e)&&(n=this._checkForIntersections,i=o=null,this.POLL_INTERVAL?o=h.setInterval(n,this.POLL_INTERVAL):(c(h,"resize",n,!0),c(e,"scroll",n,!0),this.USE_MUTATION_OBSERVER&&"MutationObserver"in h&&(i=new h.MutationObserver(n)).observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0})),this._monitoringDocuments.push(e),this._monitoringUnsubscribes.push((function(){var t=e.defaultView;t&&(o&&t.clearInterval(o),u(t,"resize",n,!0)),u(e,"scroll",n,!0),i&&i.disconnect()})),e==(this.root&&this.root.ownerDocument||t)||(s=r(e))&&this._monitorIntersections(s.ownerDocument))},s.prototype._unmonitorIntersections=function(e){var n,o,i,s=this._monitoringDocuments.indexOf(e);-1!=s&&(n=this.root&&this.root.ownerDocument||t,this._observationTargets.some((function(t){if((o=t.element.ownerDocument)==e)return!0;for(;o&&o!=n;){var o,i=r(o);if((o=i&&i.ownerDocument)==e)return!0}return!1}))||(o=this._monitoringUnsubscribes[s],this._monitoringDocuments.splice(s,1),this._monitoringUnsubscribes.splice(s,1),o(),e==n||(i=r(e))&&this._unmonitorIntersections(i.ownerDocument)))},s.prototype._unmonitorAllIntersections=function(){var t=this._monitoringUnsubscribes.slice(0);this._monitoringDocuments.length=0;for(var e=this._monitoringUnsubscribes.length=0;e<t.length;e++)t[e]()},s.prototype._checkForIntersections=function(){var t,e;!this.root&&n&&!o||(t=this._rootIsInDom(),e=t?this._getRootRect():{top:0,bottom:0,left:0,right:0,width:0,height:0},this._observationTargets.forEach((function(o){var r=o.element,s=h(r),c=this._rootContainsTarget(r),u=o.entry,l=t&&c&&this._computeTargetAndRootIntersection(r,s,e),a=o.entry=new i({time:window.performance&&performance.now&&performance.now(),target:r,boundingClientRect:s,rootBounds:n&&!this.root?null:e,intersectionRect:l});u?t&&c?this._hasCrossedThreshold(u,a)&&this._queuedEntries.push(a):u&&u.isIntersecting&&this._queuedEntries.push(a):this._queuedEntries.push(a)}),this),this._queuedEntries.length&&this._callback(this.takeRecords(),this))},s.prototype._computeTargetAndRootIntersection=function(e,r,i){if("none"!=window.getComputedStyle(e).display){for(var s,c,u,l,p,f,g,m,b=r,v=d(e),y=!1;!y&&v;){var w,A,O,T,_=null,U=1==v.nodeType?window.getComputedStyle(v):{};if("none"==U.display)return null;if(v==this.root||9==v.nodeType?(y=!0,v==this.root||v==t?n&&!this.root?!o||0==o.width&&0==o.height?b=_=v=null:_=o:_=i:(A=(w=d(v))&&h(w),O=w&&this._computeTargetAndRootIntersection(w,A,i),A&&O?(v=w,_=a(A,O)):b=v=null)):v!=(T=v.ownerDocument).body&&v!=T.documentElement&&"visible"!=U.overflow&&(_=h(v)),_&&(s=_,c=b,void 0,u=Math.max(s.top,c.top),l=Math.min(s.bottom,c.bottom),p=Math.max(s.left,c.left),m=l-u,b=0<=(g=(f=Math.min(s.right,c.right))-p)&&0<=m?{top:u,bottom:l,left:p,right:f,width:g,height:m}:null),!b)break;v=v&&d(v)}return b}},s.prototype._getRootRect=function(){var e,n,o;return o=this.root?h(this.root):(e=t.documentElement,n=t.body,{top:0,left:0,right:e.clientWidth||n.clientWidth,width:e.clientWidth||n.clientWidth,bottom:e.clientHeight||n.clientHeight,height:e.clientHeight||n.clientHeight}),this._expandRectByRootMargin(o)},s.prototype._expandRectByRootMargin=function(t){var e=this._rootMarginValues.map((function(e,n){return"px"==e.unit?e.value:e.value*(n%2?t.width:t.height)/100})),n={top:t.top-e[0],right:t.right+e[1],bottom:t.bottom+e[2],left:t.left-e[3]};return n.width=n.right-n.left,n.height=n.bottom-n.top,n},s.prototype._hasCrossedThreshold=function(t,e){var n=t&&t.isIntersecting?t.intersectionRatio||0:-1,o=e.isIntersecting?e.intersectionRatio||0:-1;if(n!==o)for(var r=0;r<this.thresholds.length;r++){var i=this.thresholds[r];if(i==n||i==o||i<n!=i<o)return!0}},s.prototype._rootIsInDom=function(){return!this.root||p(t,this.root)},s.prototype._rootContainsTarget=function(e){return p(this.root||t,e)&&(!this.root||this.root.ownerDocument==e.ownerDocument)},s.prototype._registerInstance=function(){e.indexOf(this)<0&&e.push(this)},s.prototype._unregisterInstance=function(){var t=e.indexOf(this);-1!=t&&e.splice(t,1)},window.IntersectionObserver=s,window.IntersectionObserverEntry=i))}()}]).default;