feat(storefront): BCTHEME-446 Improve performance of analyzing homepage carousel images

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Improve performance of analyzing homepage carousel images. [#2027](https://github.com/bigcommerce/cornerstone/pull/2027)
 - Added keyboard support on radio buttons. [#2028](https://github.com/bigcommerce/cornerstone/pull/2028)
 - Replace SSL settings in Page builder with global region for SSL certificate. [#2026](https://github.com/bigcommerce/cornerstone/pull/2026)
 - fixed email address validation in forms. [#2029](https://github.com/bigcommerce/cornerstone/pull/2029)

assets/js/theme/common/carousel/utils/getActiveSlideInfo.js

@@ -5,16 +5,12 @@ export default ({ $slider }, isAnalyzedDataAttr) => {
     if (isAnalyzedSlide) return { isAnalyzedSlide };
 
     const $activeSlideImg = $activeSlide.find('.heroCarousel-image');
-
-    const attrsObj = {
-        src: $activeSlideImg.attr('src'),
-        srcset: $activeSlideImg.attr('srcset'),
-        sizes: $activeSlideImg.attr('sizes'),
-    };
+    const activeSlideImgNode = $activeSlideImg[0];
 
     return {
-        attrsObj,
         $slider,
         $activeSlide,
+        $activeSlideImg,
+        activeSlideImgNode,
     };
 };

assets/js/theme/common/carousel/utils/handleImageAspectRatio.js

@@ -6,7 +6,7 @@ const IMAGE_CLASSES = {
 };
 const IS_ANALYZED_DATA_ATTR = 'image-ratio-analyzed';
 
-const defineClass = (imageAspectRatio) => {
+const defineAspectRatioClass = (imageAspectRatio) => {
     switch (true) {
     case imageAspectRatio > 0.8 && imageAspectRatio <= 1.2:
         return IMAGE_CLASSES.square;
@@ -17,13 +17,21 @@ const defineClass = (imageAspectRatio) => {
     }
 };
 
-export default ({ delegateTarget }, carousel) => {
+const setAspectRatioClass = (imageNode, $slides) => {
+    if (imageNode.naturalHeight <= 1) return;
+
+    const imageAspectRatio = imageNode.naturalHeight / imageNode.naturalWidth;
+    $slides.each((idx, slide) => $(slide).addClass(defineAspectRatioClass(imageAspectRatio)));
+};
+
+export default ({ delegateTarget }, carouselObj) => {
     const {
         isAnalyzedSlide,
-        attrsObj,
         $slider,
         $activeSlide,
-    } = getActiveSlideInfo(carousel || delegateTarget.slick, IS_ANALYZED_DATA_ATTR);
+        $activeSlideImg,
+        activeSlideImgNode,
+    } = getActiveSlideInfo(carouselObj || delegateTarget.slick, IS_ANALYZED_DATA_ATTR);
 
     if (isAnalyzedSlide) return;
 
@@ -32,15 +40,12 @@ export default ({ delegateTarget }, carousel) => {
 
     if ($activeSlide.find('.heroCarousel-content').length) return;
 
-    $('<img />')
-        .on('load', function getImageSizes() {
-            const imageHeight = this.height;
-            const imageWidth = this.width;
-
-            if (imageHeight < 2 || imageWidth < 2) return;
-
-            const imageAspectRatio = imageHeight / imageWidth;
-            $activeSlideAndClones.each((idx, slide) => $(slide).addClass(defineClass(imageAspectRatio)));
-        })
-        .attr(attrsObj);
+    if (activeSlideImgNode.complete) {
+        if (activeSlideImgNode.naturalHeight === 1) {
+            // only base64 image from srcset was loaded
+            $activeSlideImg.on('load', () => setAspectRatioClass(activeSlideImgNode, $activeSlideAndClones));
+        } else if (activeSlideImgNode.naturalHeight > 1) {
+            setAspectRatioClass(activeSlideImgNode, $activeSlideAndClones);
+        }
+    } else $activeSlideImg.on('load', () => setAspectRatioClass(activeSlideImgNode, $activeSlideAndClones));
 };

assets/js/theme/common/carousel/utils/handleImageLoad.js

@@ -1,20 +1,47 @@
+import { isBrowserIE } from '../../utils/ie-helpers';
 import getActiveSlideInfo from './getActiveSlideInfo';
 
 const IMAGE_ERROR_CLASS = 'is-image-error';
 const IS_ANALYZED_DATA_ATTR = 'image-load-analyzed';
 
-export default (e, carousel) => {
+const generateImage = ($slide, $image) => {
+    $('<img />')
+        .on('error', () => $slide.addClass(IMAGE_ERROR_CLASS))
+        .attr('src', $image.attr('src'));
+};
+
+export default (e, carouselObj) => {
     const {
         isAnalyzedSlide,
-        attrsObj,
         $activeSlide,
-    } = getActiveSlideInfo(carousel, IS_ANALYZED_DATA_ATTR);
+        $activeSlideImg,
+        activeSlideImgNode,
+    } = getActiveSlideInfo(carouselObj, IS_ANALYZED_DATA_ATTR);
 
     if (isAnalyzedSlide) return;
 
     $activeSlide.data(IS_ANALYZED_DATA_ATTR, true);
 
-    $('<img />')
-        .on('error', () => $activeSlide.addClass(IMAGE_ERROR_CLASS))
-        .attr(attrsObj);
+    if (activeSlideImgNode.complete) {
+        if (activeSlideImgNode.naturalHeight === 0) {
+            $activeSlide.addClass(IMAGE_ERROR_CLASS);
+        } else if (activeSlideImgNode.naturalHeight === 1) {
+            // only base64 image from srcset was loaded
+            $activeSlideImg.on('error', () => $activeSlide.addClass(IMAGE_ERROR_CLASS));
+        }
+
+        return;
+    }
+
+    if (!$activeSlideImg.attr('src')) {
+        $activeSlide.addClass(IMAGE_ERROR_CLASS);
+        return;
+    }
+
+    if (isBrowserIE) {
+        generateImage($activeSlide, $activeSlideImg);
+        return;
+    }
+
+    $activeSlideImg.on('error', () => $activeSlide.addClass(IMAGE_ERROR_CLASS));
 };

assets/js/theme/common/utils/ie-helpers.js

@@ -1,3 +1,3 @@
-export const isBrowserIE = navigator.userAgent.includes('Trident');
+export const isBrowserIE = !!document.documentMode;
 
 export const convertIntoArray = collection => Array.prototype.slice.call(collection);

assets/scss/components/stencil/heroCarousel/_heroCarousel.scss

@@ -33,6 +33,15 @@
         }
     }
 
+    // for IE
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+        opacity: 0;
+
+        &.slick-initialized {
+            opacity: 1;
+        }
+    }
+
     &:not(.slick-initialized) :not(.heroCarousel-slide--first).heroCarousel-slide {
         display: none;
     }