lazzy
Version:
Modern and lightweight lazy loading library
1 lines • 6.32 kB
JavaScript
var lazzy=void 0!==lazzy?lazzy:function(){var _hasWebPSupport=!1,_hasSrcSetSupport=!1,_windowWidth=null,_windowHeight=null,_hasIntersectionObserverSupport="undefined"!=typeof IntersectionObserver,_mutationObserverIsDisabled=!1,_doneElements=[],_selector=".lazzy",_offset=0,_offsetPercentage=0,_pixelDensity=!1,isVisible=function(element){if(null===_windowWidth)return!1;var e=element.getBoundingClientRect(),rectTop=e.top+-_offset,rectBottom=e.bottom,rectLeft=e.left;if(_offsetPercentage){var windowHeightWithOffset=_windowHeight+_windowHeight*_offsetPercentage;return rectTop+e.height>0&&rectTop<windowHeightWithOffset&&rectLeft+e.width>0&&rectLeft<_windowWidth}return rectTop+e.height>0&&rectTop<_windowHeight&&rectLeft+e.width>0&&rectLeft<_windowWidth||rectBottom>0&&rectBottom<_windowHeight},updateImage=function(container,element){var options=element.getAttribute("data-srcset");if(null!==options)if((options=options.trim()).length>0){for(var temp=[],optionsCount=(options=options.split(",")).length,j=0;j<optionsCount;j++){var option=options[j].trim();if(0!==option.length){var spaceIndex=option.lastIndexOf(" ");if(-1===spaceIndex)var optionImage=option,optionWidth=999998;else var optionImage=option.substr(0,spaceIndex),optionWidth=parseInt(option.substr(spaceIndex+1,option.length-spaceIndex-2),10);var add=!1;-1!==optionImage.indexOf(".webp",optionImage.length-5)?_hasWebPSupport&&(add=!0):add=!0,add&&temp.push([optionImage,optionWidth])}}temp.sort(function(a,b){if(a[1]<b[1])return-1;if(a[1]>b[1])return 1;if(a[1]===b[1]){if(-1!==b[0].indexOf(".webp",b[0].length-5))return 1;if(-1!==a[0].indexOf(".webp",a[0].length-5))return-1}return 0}),options=temp}else options=[];else options=[];for(var containerWidth=_pixelDensity?container.offsetWidth*(void 0!==window.devicePixelRatio?window.devicePixelRatio:1):container.offsetWidth,bestSelectedOption=null,optionsCount=options.length,j=0;j<optionsCount;j++){var optionData=options[j];if(optionData[1]>=containerWidth){bestSelectedOption=optionData;break}}if(null===bestSelectedOption&&(bestSelectedOption=[element.getAttribute("src"),999999]),void 0===container.lazzyLastSetOption&&(container.lazzyLastSetOption=["",0]),container.lazzyLastSetOption[1]<bestSelectedOption[1]){container.lazzyLastSetOption=bestSelectedOption;var url=bestSelectedOption[0];void 0===container.lazzyEventsAttached&&(container.lazzyEventsAttached=!0,element.addEventListener("load",function(){var handler=container.getAttribute("data-onlazyload");null!==handler&&new Function(handler).bind(container)()},!1),element.addEventListener("error",function(){container.lazzyLastSetOption=["",0]},!1)),url===element.getAttribute("src")?element.removeAttribute("srcset"):element.setAttribute("srcset",url)}},updateWindowSize=function(){_windowWidth=window.innerWidth,_windowHeight=window.innerHeight},updateElement=function(element){if(-1===_doneElements.indexOf(element)&&isVisible(element)&&_hasSrcSetSupport){if("img"===element.tagName.toLowerCase())return void updateImage(element,element);var imageElement=element.querySelector("img");if(null!==imageElement)return void updateImage(element,imageElement)}},run=function(options){var optionsType=Object.prototype.toString.call(options);"[object String]"!==optionsType&&"[object Array]"!==optionsType||(_selector=options||_selector),"[object Object]"===optionsType&&(_selector=options.selector||_selector,_pixelDensity=options.pixelDensity||options.isDependingOnPixelDensity||_pixelDensity,"number"==typeof options.preload||"string"==typeof options.preload&&-1!==options.preload.indexOf("px")?_offset=parseInt(options.preload)||_offset:"string"==typeof options.preload&&-1!==options.preload.indexOf("%")&&(_offsetPercentage=parseFloat(options.preload)/100||_offsetPercentage));for(var elements=document.querySelectorAll(_selector),elementsCount=elements.length,i=0;i<elementsCount;i++)updateElement(elements[i])};if(void 0!==window.addEventListener&&void 0!==document.querySelectorAll){updateWindowSize();var image=new Image;image.src="data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEADMDOJaQAA3AA/uuuAAA=",image.onload=image.onerror=function(){_hasWebPSupport=2===image.width,_hasSrcSetSupport="srcset"in document.createElement("img");var requestAnimationFrameFunction=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(callback){window.setTimeout(callback,1e3/60)},hasChange=!0,runIfHasChange=function(){hasChange&&(hasChange=!1,run()),requestAnimationFrameFunction.call(null,runIfHasChange)};if(runIfHasChange(),_hasIntersectionObserverSupport)var updateIntersectionObservers=function(){for(var elements=document.querySelectorAll(_selector),elementsCount=elements.length,i=0;i<elementsCount;i++){var element=elements[i];void 0===element.lazzyObserverAttached&&(element.lazzyObserverAttached=!0,intersectionObserver.observe(element))}},intersectionObserver=new IntersectionObserver(function(entries){for(var i in entries){var entry=entries[i];entry.intersectionRatio>0&&updateElement(entry.target)}}),changeTimeout=null;var setChanged=function(){_hasIntersectionObserverSupport?(window.clearTimeout(changeTimeout),changeTimeout=window.setTimeout(function(){hasChange=!0},300)):hasChange=!0},updateParentNodesScrollListeners=function(){for(var elements=document.querySelectorAll(_selector),elementsCount=elements.length,i=0;i<elementsCount;i++)for(var parentNode=elements[i].parentNode;parentNode&&"html"!==parentNode.tagName.toLowerCase();)void 0===parentNode.lazzyScrollAttached&&(parentNode.lazzyScrollAttached=!0,parentNode.addEventListener("scroll",setChanged)),parentNode=parentNode.parentNode},initialize=function(){var observer;(window.addEventListener("resize",function(){updateWindowSize(),setChanged()}),window.addEventListener("scroll",setChanged),window.addEventListener("load",setChanged),_hasIntersectionObserverSupport&&updateIntersectionObservers(),updateParentNodesScrollListeners(),"undefined"!=typeof MutationObserver)&&new MutationObserver(function(){_hasIntersectionObserverSupport&&updateIntersectionObservers(),updateParentNodesScrollListeners(),setChanged()}).observe(document.querySelector("body"),{childList:!0,subtree:!0})};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",initialize):initialize()}}return{run:run}}();