unlazy/dist/unlazy.js

Universal lazy loading library for placeholder images leveraging native browser APIs

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