unlazy/dist/unlazy.iife.js

Universal lazy loading library for placeholder images leveraging native browser APIs

var UnLazy=(function(c){"use strict";const A="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E",S=typeof window>"u",g=!S&&"loading"in HTMLImageElement.prototype,m=!S&&(!("onscroll"in window)||/(?:gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent));function L(e,t=document){return typeof e=="string"?[...t.querySelectorAll(e)]:e instanceof Element?[e]:[...e]}function I(e){const t=Date.now();return A.replace(/\s/,` data-id='${t}-${e}' `)}function O(e,t){let r;return function(...n){r!=null&&clearTimeout(r),r=setTimeout(()=>{e(...n),r=void 0},t)}}function p(e='img[loading="lazy"]',{hash:t=!0,hashType:r="blurhash",placeholderSize:n=32,updateSizesOnResize:o=!1,onImageLoad:E}={}){const a=new Set;for(const[z,s]of L(e).entries()){const _=d(s,{updateOnResize:o});if(o&&_&&a.add(_),!s.dataset.src&&!s.dataset.srcset){(typeof __UNLAZY_LOGGING__>"u"||__UNLAZY_LOGGING__)&&console.error("[unlazy] Missing `data-src` or `data-srcset` attribute",s);continue}if(m||!g){h(s),l(s),f(s);continue}if(s.src||(s.src=I(z)),s.complete&&s.naturalWidth>0){i(s,E);continue}const b=()=>i(s,E);s.addEventListener("load",b,{once:!0}),a.add(()=>s.removeEventListener("load",b))}return()=>{for(const z of a)z();a.clear()}}function v(e='img[data-sizes="auto"], source[data-sizes="auto"]'){for(const t of L(e))d(t)}function i(e,t){if(y(e)){h(e),l(e),f(e),t?.(e);return}const r=new Image,{srcset:n,src:o,sizes:E}=e.dataset;if(E==="auto"){const a=w(e);a&&(r.sizes=`${a}px`)}else e.sizes&&(r.sizes=e.sizes);n&&(r.srcset=n),o&&(r.src=o),r.addEventListener("load",()=>{l(e),f(e),t?.(e)},{once:!0})}const u=new WeakMap;function d(e,t){if(e.dataset.sizes!=="auto")return;const r=w(e);if(r&&(e.sizes=`${r}px`),y(e)&&t?.processSourceElements)for(const n of[...e.parentElement.getElementsByTagName("source")])d(n,{processSourceElements:!0});if(t?.updateOnResize){if(!u.has(e)){const n=O(()=>d(e),500),o=new ResizeObserver(n);u.set(e,o),o.observe(e)}return()=>{const n=u.get(e);n&&(n.disconnect(),u.delete(e))}}}function f(e){e.dataset.src&&(e.src=e.dataset.src,e.removeAttribute("data-src"))}function l(e){e.dataset.srcset&&(e.srcset=e.dataset.srcset,e.removeAttribute("data-srcset"))}function h(e){const t=e.parentElement;t?.tagName.toLowerCase()==="picture"&&([...t.querySelectorAll("source[data-srcset]")].forEach(l),[...t.querySelectorAll("source[data-src]")].forEach(f))}function w(e){return e instanceof HTMLSourceElement?e.parentElement?.getElementsByTagName("img")[0]?.offsetWidth:e.offsetWidth}function y(e){return e.parentElement?.tagName.toLowerCase()==="picture"}const T=Object.freeze({autoSizes:v,lazyLoad:p,loadImage:i});return document.currentScript?.hasAttribute("init")&&p(),c.autoSizes=v,c.default=T,c.lazyLoad=p,c.loadImage=i,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),c})({});