@massimo-cassandro/minimo 1.14.4 → 1.14.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.14.4",
+  "version": "1.14.5",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",

package/src/utilities/build-picture-tag.js

@@ -64,6 +64,7 @@ import { classnames } from './classnames.js';
  * @param {string[]} [args.formats=['avif','webp','pjpg']] - Image formats: the last one is used for the `img` fallback element, the others for the `source` elements.
  * @param {boolean} [args.devMode=false] - When true, `avif` is excluded from `formats` (not supported by the local dev environment).
  * @param {boolean} [args.lazy=true] - When true, the `img` element gets `loading="lazy"`.
+ * @param {((img: HTMLImageElement) => void) | null} [args.onLoad=null] - Called once the image has finished loading, receiving the `img` element (called immediately if the image is already complete).
  * @param {boolean} [args.condition=true] - When false, the function returns `null` without building anything.
  * @param {boolean} [args.legacyMediaSyntax=false] - When true, the `sizes` media conditions use `(min-width: …)` instead of the range syntax `(width >= …)`, for older browsers (pre Chrome/Edge 104, Firefox 102, Safari 16.4).
  * @param {string|null} [args.pictureExtraClass=null] - Extra class(es) for the `picture` element.
@@ -82,6 +83,7 @@ export function buildPictureTag({
   formats = ['avif', 'webp', 'pjpg'],
   devMode = false,
   lazy = true,
+  onLoad = null,
   condition = true,
   legacyMediaSyntax = false,
   pictureExtraClass = null,
@@ -204,6 +206,14 @@ export function buildPictureTag({
             loading: lazy? 'lazy' : null,
             ...imgExtraAttrs
           },
+          callback: onLoad == null? undefined : el => {
+            const img = /** @type {HTMLImageElement} */ (el);
+            if(img.complete) {
+              onLoad(img);
+            } else {
+              img.addEventListener('load', () => onLoad(img), {once: true});
+            }
+          },
           // TODO classe popover, se attivato
           // callback: options.addPopover
           //   ? el => el.addEventListener('click', () => zoomPopoverEl.togglePopover())