mobmash.click/resources/js/img-preload.ext.js

import htmx from 'htmx.org';

console.log("module loaded");

htmx.defineExtension('img-preload', {
    onEvent: (name, event) => {
        if (
            (
                event?.target?.getAttribute("hx-ext") ??
                event?.target?.getAttribute("data-hx-ext" ?? "")
            ) !== "img-preload"
        ) {
            return;
        }

        switch (name) {
            case 'htmx:trigger':
                [eval][0](event.target.getAttribute("data-loading-callback"));
                break;
            case 'htmx:beforeOnLoad':
                event.detail.shouldSwap = false;

                const parser = new DOMParser();
                const doc = parser.parseFromString(event.detail.xhr.response, 'text/html');
                const imagePromises = [...doc.getElementsByTagName('img')]
                    .map(img => img.src)
                    .map(src => new Promise((resolve, reject) => {
                        const image = new Image();
                        image.onload = resolve;
                        image.onerror = reject;
                        image.src = src;
                    }));

                Promise.all(imagePromises)
                    .then(() => {
                        htmx.swap(event.detail.target, event.detail.xhr.response, {
                            swapStyle: "outerHTML",
                            transition: true,
                        });
                        [eval][0](event.target.getAttribute("data-loaded-callback"));
                    })
                    .catch(error => {
                        console.error('Error loading images:', error);
                    });
                break;
        }
    }
});