|
|
@@ -0,0 +1,21 @@
|
|
|
+function loadingFailed(imgEl: HTMLImageElement) {
|
|
|
+ return imgEl.complete && imgEl.naturalWidth === 0
|
|
|
+}
|
|
|
+
|
|
|
+document.querySelectorAll('[data-ol-fallback-image]').forEach(element => {
|
|
|
+ if (!(element instanceof HTMLImageElement)) {
|
|
|
+ // The sprinkle only applies to image elements.
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const imgEl = element as HTMLImageElement
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+})
|