explicit load image with abortable

src/renderer/ImageCellRenderer.ts

@@ -2,6 +2,15 @@ import {Column, IDataRow, LinkColumn} from '../model';
 import {ERenderMode, ICellRendererFactory} from './interfaces';
 import {renderMissingDOM} from './missing';
 import {noRenderer} from './utils';
+import {abortAble} from 'lineupengine';
+
+function loadImage(src: string) {
+  return new Promise<HTMLImageElement>((resolve) => {
+    const image = new Image();
+    image.onload = () => resolve(image);
+    image.src = src;
+  });
+}
 
 /** @internal */
 export default class ImageCellRenderer implements ICellRendererFactory {
@@ -16,9 +25,22 @@ export default class ImageCellRenderer implements ICellRendererFactory {
       template: `<div></div>`,
       update: (n: HTMLElement, d: IDataRow) => {
         const missing = renderMissingDOM(n, col, d);
+        n.style.backgroundImage = null;
+        if (missing) {
+          n.title = '';
+          return;
+        }
         const v = col.getLink(d);
         n.title = v ? v.alt : '';
-        n.style.backgroundImage = missing || !v ? null : `url('${v.href}')`;
+        if (!v) {
+          return;
+        }
+        return abortAble(loadImage(v.href)).then((image) => {
+          if (typeof image === 'symbol') {
+            return;
+          }
+          n.style.backgroundImage = missing || !v ? null : `url('${image.src}')`;
+        })
       }
     };
   }

src/styles/renderer/_image.scss

@@ -4,16 +4,4 @@
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
-
-  &:not(.#{$lu_css_prefix}-missing)::before {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: $engine_loading_image;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-blend-mode: overlay;
-    z-index: -1;
-  }
 }