diff --git a/services/web/frontend/js/features/fallback-image/index.js b/services/web/frontend/js/features/fallback-image/index.js new file mode 100644 index 0000000000..8ab3ab5003 --- /dev/null +++ b/services/web/frontend/js/features/fallback-image/index.js @@ -0,0 +1,16 @@ +function loadingFailed(imgEl) { + return imgEl.complete && imgEl.naturalWidth === 0 +} + +document.querySelectorAll('[data-ol-fallback-image]').forEach(imgEl => { + function showFallback() { + imgEl.src = imgEl.getAttribute('data-ol-fallback-image') + } + if (loadingFailed(imgEl)) { + // The image loading failed before the sprinkle ran. + showFallback() + } else { + // The image loading might fail in the future. + imgEl.addEventListener('error', showFallback) + } +}) diff --git a/services/web/frontend/js/marketing.js b/services/web/frontend/js/marketing.js index 8aa97e710e..6c9be38316 100644 --- a/services/web/frontend/js/marketing.js +++ b/services/web/frontend/js/marketing.js @@ -5,6 +5,8 @@ import './features/form-helpers/hydrate-form' import './features/link-helpers/slow-link' import './features/contact-form' import './features/event-tracking' +import './features/fallback-image' import './features/multi-submit' $('[data-ol-lang-selector-tooltip]').tooltip({ trigger: 'hover' }) +$('[data-toggle="tooltip"]').tooltip()