UNPKG

vanilla-lazyload

Version:

A fast, lightweight script to load images as they enter the viewport. SEO friendly, it supports responsive images (both srcset + sizes and picture) and progressive JPEG

3 lines (2 loc) 6.4 kB
var _extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t};define(function(){"use strict";function t(t,e,n){return!(u(t,e,n)||f(t,e,n)||_(t,e,n)||h(t,e,n))}function e(t,e,n){var i=e._settings;!n&&r(t)||(C(i.callback_enter,t),x.indexOf(t.tagName)>-1&&(R(t,e),E(t,i.class_loading)),H(t,e),s(t),C(i.callback_set,t))}var n=function(){return{elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_enter:null,callback_finish:null,to_webp:!1}},i=function(t,e){return t.getAttribute("data-"+e)},o=function(t,e,n){var i="data-"+e;null!==n?t.setAttribute(i,n):t.removeAttribute(i)},s=function(t){return o(t,"was-processed","true")},r=function(t){return"true"===i(t,"was-processed")},l=function(t){return t.filter(function(t){return!r(t)})},a=function(t,e){return t.filter(function(t){return t!==e})},c=function(t){return t.getBoundingClientRect().top+window.pageYOffset-t.ownerDocument.documentElement.clientTop},u=function(t,e,n){return(e===window?window.innerHeight+window.pageYOffset:c(e)+e.offsetHeight)<=c(t)-n},d=function(t){return t.getBoundingClientRect().left+window.pageXOffset-t.ownerDocument.documentElement.clientLeft},_=function(t,e,n){var i=window.innerWidth;return(e===window?i+window.pageXOffset:d(e)+i)<=d(t)-n},f=function(t,e,n){return(e===window?window.pageYOffset:c(e))>=c(t)+n+t.offsetHeight},h=function(t,e,n){return(e===window?window.pageXOffset:d(e))>=d(t)+n+t.offsetWidth},g=function(t,e){var n,i=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(n)},p=function(t,e){return e?t.replace(/\.(jpe?g|png)/gi,".webp"):t},m="undefined"!=typeof window,w=m&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),v=m&&"classList"in document.createElement("p"),b=m&&function(){var t=document.createElement("canvas");return!(!t.getContext||!t.getContext("2d"))&&0===t.toDataURL("image/webp").indexOf("data:image/webp")}(),E=function(t,e){v?t.classList.add(e):t.className+=(t.className?" ":"")+e},L=function(t,e){v?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},T=function(t,e,n,o){for(var s,r=0;s=t.children[r];r+=1)if("SOURCE"===s.tagName){var l=i(s,n);O(s,e,l,o)}},O=function(t,e,n,i){n&&t.setAttribute(e,p(n,i))},S=function(t,e){var n=b&&e.to_webp,o=i(t,e.data_src),s=i(t,e.data_bg);if(o){var r=p(o,n);t.style.backgroundImage='url("'+r+'")'}if(s){var l=p(s,n);t.style.backgroundImage=l}},y={IMG:function(t,e){var n=b&&e.to_webp,o=e.data_srcset,s=t.parentNode;s&&"PICTURE"===s.tagName&&T(s,"srcset",o,n);var r=i(t,e.data_sizes);O(t,"sizes",r);var l=i(t,o);O(t,"srcset",l,n);var a=i(t,e.data_src);O(t,"src",a,n)},IFRAME:function(t,e){var n=i(t,e.data_src);O(t,"src",n)},VIDEO:function(t,e){var n=e.data_src,o=i(t,n);T(t,"src",n),O(t,"src",o),t.load()}},H=function(t,e){var n=e._settings,i=t.tagName,o=y[i];if(o)return o(t,n),e._updateLoadingCount(1),void(e._elements=a(e._elements,t));S(t,n)},C=function(t,e){t&&t(e)},k=function(t,e,n){t.addEventListener(e,n)},N=function(t,e,n){t.removeEventListener(e,n)},z=function(t,e,n){k(t,"load",e),k(t,"loadeddata",e),k(t,"error",n)},A=function(t,e,n){N(t,"load",e),N(t,"loadeddata",e),N(t,"error",n)},I=function(t,e,n){var i=n._settings,o=e?i.class_loaded:i.class_error,s=e?i.callback_load:i.callback_error,r=t.target;L(r,i.class_loading),E(r,o),C(s,r),n._updateLoadingCount(-1)},R=function(t,e){var n=function n(o){I(o,!0,e),A(t,n,i)},i=function i(o){I(o,!1,e),A(t,n,i)};z(t,n,i)},x=["IMG","IFRAME","VIDEO"],D=function(t,e){for(;e.length;)t.splice(e.pop(),1)},F=function(t){this._settings=_extends({},n(),t),this._loadingCount=0,this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};return F.prototype={_loopThroughElements:function(e){var n=this._settings,i=this._elements,o=i?i.length:0,s=void 0,r=[],l=this._isFirstLoop;if(l&&(this._isFirstLoop=!1),0!==o){for(s=0;s<o;s++){var a=i[s];n.skip_invisible&&null===a.offsetParent||(e||t(a,n.container,n.threshold))&&(l&&E(a,n.class_initial),this.load(a),r.push(s))}D(i,r)}else this._stopScrollHandler()},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},_updateLoadingCount:function(t){this._loadingCount+=t,0===this._elements.length&&0===this._loadingCount&&C(this._settings.callback_finish)},handleScroll:function(){var t=this._settings.throttle;if(0!==t){var e=Date.now(),n=t-(e-this._previousLoopTime);n<=0||n>t?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=e,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},loadAll:function(){this._loopThroughElements(!0)},update:function(t){var e=this._settings,n=t||this._queryOriginNode.querySelectorAll(e.elements_selector);this._elements=l(Array.prototype.slice.call(n)),w?this.loadAll():(this._loopThroughElements(),this._startScrollHandler())},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},load:function(t,n){e(t,this,n)}},m&&function(t,e){if(e)if(e.length)for(var n,i=0;n=e[i];i+=1)g(t,n);else g(t,e)}(F,window.lazyLoadOptions),F}); //# sourceMappingURL=lazyload.amd.min.js.map