diff --git a/public/assets/js/app.js b/public/assets/js/app.js index ce9813e..b302948 100755 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -831,6 +831,7 @@ document.addEventListener('DOMContentLoaded', () => { ? `Varianten fuer ${form.querySelector(`[data-avatar-component-tab="${activeField}"]`)?.textContent?.trim() || 'diesen Bereich'}` : 'Varianten werden geladen'; setAvatarLoaderState(form, true, 0, images.length, label); + const loadRunId = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`; images.forEach((image) => { const field = image.getAttribute('data-avatar-option-field') || ''; @@ -843,6 +844,7 @@ document.addEventListener('DOMContentLoaded', () => { } const src = `${avatarEndpoint}?${params.toString()}`; + image.dataset.avatarLoadRun = loadRunId; if (image.dataset.avatarLoadedSrc === src) { loaded += 1; setAvatarLoaderState(form, true, loaded, images.length, label); @@ -852,8 +854,10 @@ document.addEventListener('DOMContentLoaded', () => { return; } - const preload = new Image(); + let finished = false; const finalize = () => { + if (finished || image.dataset.avatarLoadRun !== loadRunId) return; + finished = true; loaded += 1; setAvatarLoaderState(form, true, loaded, images.length, label); if (loaded >= images.length) { @@ -861,13 +865,20 @@ document.addEventListener('DOMContentLoaded', () => { } }; - preload.onload = () => { - image.src = src; + const timeoutId = window.setTimeout(() => { + finalize(); + }, 2500); + + image.onload = () => { + window.clearTimeout(timeoutId); image.dataset.avatarLoadedSrc = src; finalize(); }; - preload.onerror = finalize; - preload.src = src; + image.onerror = () => { + window.clearTimeout(timeoutId); + finalize(); + }; + image.src = src; }); };