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

48 lines
1.7 KiB
JavaScript
Raw Normal View History

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':
2024-08-02 20:52:46 +00:00
[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,
});
2024-08-02 20:52:46 +00:00
[eval][0](event.target.getAttribute("data-loaded-callback"));
})
.catch(error => {
console.error('Error loading images:', error);
});
break;
}
}
});