Used cached images for background image

src/StyleWrapper/StyleWrapperView.jsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import cx from 'classnames';
 import config from '@plone/volto/registry';
-import { withScreenHeight } from '@eeacms/volto-block-style/hocs';
+import {
+  withCachedImages,
+  withScreenHeight,
+} from '@eeacms/volto-block-style/hocs';
 
 export function getInlineStyles(data, props = {}) {
   return {
@@ -83,16 +86,18 @@ const StyleWrapperView = (props) => {
       children
     ) : (
       <div {...attrs} ref={props.setRef}>
-        {backgroundImage ? (
-          <div
-            className="bg"
-            style={{
-              backgroundImage: `url(${backgroundImage}/@@images/image`,
-            }}
+        {Object.keys(props.images || {}).map((bgImage) => (
+          <img
+            key={`styled-bg-image-${bgImage}`}
+            alt=""
+            src={props.images[bgImage]?.src}
+            className={cx('bg', {
+              hidden:
+                backgroundImage !== bgImage || !props.images[bgImage]?.src,
+            })}
           />
-        ) : (
-          ''
-        )}
+        ))}
+
         {ViewComponentWrapper ? <ViewComponentWrapper {...props} /> : children}
       </div>
     )
@@ -103,4 +108,8 @@ const StyleWrapperView = (props) => {
   );
 };
 
-export default withScreenHeight(StyleWrapperView);
+export default withScreenHeight(
+  withCachedImages(StyleWrapperView, {
+    getImage: (props) => props.styleData.backgroundImage || null,
+  }),
+);

src/hocs/index.js

@@ -1,3 +1,4 @@
+import withCachedImages from './withCachedImages';
 import withScreenHeight from './withScreenHeight';
 
-export { withScreenHeight };
+export { withCachedImages, withScreenHeight };

src/hocs/withCachedImages.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { isEmpty } from 'lodash';
+
+export default function withCachedImages(WrappedComponent, config = {}) {
+  return (props) => {
+    const mounted = React.useRef(false);
+    const [images, setImages] = React.useState({});
+    const image = isEmpty(config.getImage?.(props))
+      ? null
+      : config.getImage(props);
+
+    React.useEffect(() => {
+      if (!mounted.current) mounted.current = true;
+      if (image && !images[image]) {
+        const newImage = new Image();
+        newImage.src = `${image}/@@images/image`;
+        setImages({ ...images, [image]: null });
+        newImage.onload = () => {
+          if (mounted.current) {
+            setImages({ ...images, [image]: newImage });
+          }
+        };
+      }
+      return () => {
+        mounted.current = false;
+      };
+      /* eslint-disable-next-line */
+    }, [image]);
+
+    return <WrappedComponent {...props} images={images} />;
+  };
+}

src/styles.less

@@ -83,16 +83,25 @@
     }
   }
 
-  .bg {
+  img.bg {
     /* Set up positioning */
     position: absolute;
     top: 0;
     left: 0;
     /* Set up proportionate scaling */
     width: 100%;
     height: 100%;
-    background-position: center;
-    background-size: cover;
+    object-fit: cover;
+    z-index: -1;
+    pointer-events: none;
+
+    opacity: 1;
+    transition: opacity .5s;
+
+    &.hidden {
+      opacity: 0;
+      transition: opacity .5s;
+    }
   }
 }