Merge pull request #1090 from mjschock/STENCIL-3105

STENCIL-3105 - Lazy load carousel images

CHANGELOG.md

@@ -4,6 +4,7 @@
 - Style optimized checkout new checklist radio buttons [#1088](https://github.com/bigcommerce/cornerstone/pull/1088)
 - Update product UPC when options with different UPC are selected [#1089](https://github.com/bigcommerce/cornerstone/pull/1089)
 - Do not scale product thumbnail images [#1094](https://github.com/bigcommerce/cornerstone/pull/1094)
+- Lazy load carousel images [#1090](https://github.com/bigcommerce/cornerstone/pull/1090)
 
 ## 1.9.3 (2017-09-19)
 - Fixes image overlapping details on product page and Quick View on small viewports [#1067](https://github.com/bigcommerce/cornerstone/pull/1067)

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

@@ -6,7 +6,7 @@
 //
 // 1. Hide the actual image element to allow background-size: cover treatment on
 //    large screens to scale image. Use visibility because the JS uses the height
-//    to set the slide size.
+//    to set the slide size. (For browsers with object-fit only)
 //
 // 2. With JS on, minimise the jump in content as you progressively enhance the
 //    slider. Slowly fade and slide the height, instead of a jump in collapsing
@@ -90,13 +90,26 @@
     }
 }
 
+.objectfit .heroCarousel-slide {
+    // scss-lint:disable ImportantRule
+    background-image: none !important;
+}
+
 .heroCarousel-slide--stretch {
     @include breakpoint("large") { // 4
         background-size: 100% 100%;
     }
 }
 
 .heroCarousel-image {
+    @include breakpoint("medium") {
+        max-height: remCalc(600px);
+        object-fit: cover;
+        width: 100%;
+    }
+}
+
+.no-objectfit .heroCarousel-image {
     @include breakpoint("medium") { // 1
         visibility: hidden;
     }

templates/components/carousel.html

@@ -5,13 +5,14 @@
         "slidesToShow": 1,
         "slidesToScroll": 1,
         "autoplay": true,
-        "autoplaySpeed": {{carousel.swap_frequency}}
+        "autoplaySpeed": {{carousel.swap_frequency}},
+        "lazyLoad": "ondemand"
     }'>
     {{#each carousel.slides}}
     <div class="heroCarousel-slide {{#if ../theme_settings.homepage_stretch_carousel_images}}heroCarousel-slide--stretch{{/if}}"
         style="background-image: url({{image}})">
         <a href="{{url}}">
-            <img class="heroCarousel-image" src="{{image}}" alt="{{alt_text}}" title="{{alt_text}}"/>
+            <img class="heroCarousel-image" data-lazy="{{image}}" alt="{{alt_text}}" title="{{alt_text}}"/>
             {{#if heading}}
                 {{> components/carousel-content show_background=true}}
             {{else}}