STENCIL-3891 Lazy load images, save space for images while loading

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Draft
 - Use appropriately-sized (50x50) images for product thumbnails on product details page [#1097](https://github.com/bigcommerce/cornerstone/pull/1097)
 - Add spacing between checkout buttons [#1105](https://github.com/bigcommerce/cornerstone/pull/1105)
+- Load visible images before images below the fold, and save space for lazy loading images prior to loading them [#1104](https://github.com/bigcommerce/cornerstone/pull/1104)
 
 ## 1.9.4 (2017-10-17)
 - Style optimized checkout new checklist radio buttons [#1088](https://github.com/bigcommerce/cornerstone/pull/1088)

assets/scss/components/_components.scss

@@ -61,6 +61,9 @@
 // Alerts
 @import "foundation/alerts/component";
 
+// Lazy Load
+@import "foundation/lazyLoad/component";
+
 
 // Citadel components
 // -----------------------------------------------------------------------------

assets/scss/components/citadel/cards/_cards.scss

@@ -14,7 +14,7 @@
 
 .card-figure {
     margin-top: $card-figure-marginTop;
-
+    position: relative;
     &:hover {
 
         // scss-lint:disable NestingDepth
@@ -24,6 +24,12 @@
     }
 }
 
+.card-img-container {
+    max-width: get-width(stencilString('productgallery_size'));
+
+    @include lazy-loaded-padding('productgallery_size');
+}
+
 .card-figcaption {
     display: none;
     margin: $card-figcaption-margin;
@@ -41,10 +47,10 @@
 }
 
 .card-image {
+    @include lazy-loaded-img;
     border: 0;
-    display: flex;
-    margin: auto;
     width: auto;
+    max-height: 100%;
 }
 
 .card-title {

assets/scss/components/foundation/lazyLoad/_component.scss

@@ -0,0 +1,7 @@
+// =============================================================================
+// LAZY LOAD
+// =============================================================================
+
+
+// Component
+@import "lazyLoad";

assets/scss/components/foundation/lazyLoad/_lazyLoad.scss

@@ -0,0 +1,22 @@
+.lazyload, .lazyloading {
+    height:100%;
+}
+
+@mixin lazy-loaded-img() {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+}
+
+@mixin lazy-loaded-padding($size-param) {
+    &:after {
+        content: '';
+        display: block;
+        height: 0;
+        width: 100%;
+        padding-bottom: get-padding(stencilString($size-param));
+    }
+}

assets/scss/components/stencil/account/_account.scss

@@ -43,7 +43,7 @@
     }
 
     .account-product-image {
-        width: auto;
+        @include lazy-loaded-img;
     }
 }
 
@@ -72,6 +72,8 @@
     margin: 0 spacing("single") + spacing("third") 0 0;
     position: relative;
     width: 70px;
+
+    @include lazy-loaded-padding('productthumb_size');
 }
 
 .account-product-download {

assets/scss/components/stencil/cart/_cart.scss

@@ -101,8 +101,8 @@ $cart-item-label-offset:                $cart-thumbnail-maxWidth + $cart-item-sp
     float: left;
     height: $cart-thumbnail-height;
     margin-bottom: $cart-item-spacing;
-    text-align: right;
     width: grid-calc(4, $total-columns);
+    position: relative;
 
     @include breakpoint("small") {
         // height: auto;
@@ -113,17 +113,22 @@ $cart-item-label-offset:                $cart-thumbnail-maxWidth + $cart-item-sp
 
     @include breakpoint("medium") {
         float: none;
-        text-align: left;
         width: grid-calc(1, $total-columns);
     }
+
+    @include lazy-loaded-padding('productthumb_size');
 }
 
 .cart-item-fixed-image {
     width: 100%;
 }
 
 .cart-item-image {
-    width: auto;
+    @include lazy-loaded-img;
+
+    @include breakpoint("medium") {
+        margin-left:0;
+    }
 }
 
 .cart-item-title {
@@ -568,8 +573,15 @@ $cart-item-label-offset:                $cart-thumbnail-maxWidth + $cart-item-sp
 
 .previewCartItem-image {
     @include grid-column(4, $float: false);
-    padding: spacing("single");
+    padding: 0;
     text-align: center;
+    position: relative;
+
+    img {
+        @include lazy-loaded-img;
+    }
+
+    @include lazy-loaded-padding('productthumb_size');
 }
 
 .previewCartItem-content {

assets/scss/components/stencil/productView/_productView.scss

@@ -22,25 +22,32 @@
     align-items: center;
     display: flex;
     justify-content: center;
-    margin: 0;
+    margin: auto;
     position: relative;
 
     @include breakpoint("medium") {
         min-height: 366px;
         min-width: inherit;
     }
 
-    img {
-        width: 100%;
+    + .productView-thumbnails {
+        margin-top: spacing("half");
     }
+}
+
+.productView-img-container {
+    position: relative;
+    margin: auto;
+    max-width: get-width(stencilString('product_size'));
+    width: 100%;
 
-    .productView-image--default {
+    img {
+        @include lazy-loaded-img;
+        max-height: 100%;
         width: auto;
     }
 
-    + .productView-thumbnails {
-        margin-top: spacing("half");
-    }
+    @include lazy-loaded-padding('product_size');
 }
 
 .productView-thumbnails {
@@ -64,14 +71,9 @@
     }
 
     img {
-        bottom: 0;
-        left: 0;
-        margin: auto;
+        @include lazy-loaded-img;
         max-height: 50px;
         max-width: 50px;
-        position: absolute;
-        right: 0;
-        top: 0;
         width: auto;
     }
 }

assets/scss/components/stencil/writeReview/_writeReview.scss

@@ -18,9 +18,20 @@
     }
 }
 
+
 .writeReview-form {
 
     @include breakpoint("medium") {
         @include grid-column(6);
     }
 }
+
+.writeReview-productImage-container {
+    position: relative;
+
+    img {
+        @include lazy-loaded-img;
+    }
+
+    @include lazy-loaded-padding('product_size');
+}

assets/scss/layouts/_layouts.scss

@@ -31,6 +31,9 @@
 // Brand grid
 @import "brands/brandGrid";
 
+// Brand product list
+@import "brands/brand";
+
 // Product grid
 @import "products/productGrid";
 

assets/scss/layouts/blog/_blog.scss

@@ -61,7 +61,15 @@
 }
 
 .blog-thumbnail {
-    margin: 0 0 (spacing("base") * 2);
+    margin: 0 auto (spacing("base") * 2);
+    position: relative;
+    max-width: get_width(stencilString('blog_size'));
+
+    img {
+        @include lazy-loaded-img;
+    }
+
+    @include lazy-loaded-padding('blog_size');
 }
 
 .blog-post-figure {

assets/scss/layouts/brands/_brand.scss

@@ -0,0 +1,18 @@
+.brand-image-container {
+    position: relative;
+    max-width: get-width(stencilString('thumb_size'));
+
+    img {
+        @include lazy-loaded-img;
+    }
+
+    @include lazy-loaded-padding('thumb_size');
+}
+
+.brand {
+    .card-img-container {
+        max-width: get-width(stencilString('brand_size'));
+
+        @include lazy-loaded-padding('brand_size');
+    }
+}

assets/scss/layouts/header/_header.scss

@@ -93,6 +93,10 @@
     @include breakpoint("medium") {
         margin-left: remCalc(40px);
     }
+
+    .header-logo-image {
+        right: unset;
+    }
 }
 
 .header-logo--right {
@@ -101,6 +105,10 @@
     @include breakpoint("medium") {
         margin-right: remCalc(40px);
     }
+
+    .header-logo-image {
+        left: unset;
+    }
 }
 
 .header-logo-text {
@@ -139,14 +147,31 @@
     }
 }
 
+.header-logo-image-container {
+    position: relative;
+}
+
+.header-logo-image-container:after {
+    content: '';
+    display: block;
+    padding-bottom: remCalc($header-height) - $header-logo-marginVertical * 2;
+
+    @include breakpoint("medium") {
+        padding-bottom: get-height(stencilString('logo_size'));
+    }
+}
+
 .header-logo-image {
+    @include lazy-loaded-img;
     max-height: remCalc($header-height) - $header-logo-marginVertical * 2;
 
     @include breakpoint("medium") {
         max-height: none;
     }
 }
 
+
+
 //
 // Mobile Menu Toggle
 //

assets/scss/tools/_image.scss

@@ -0,0 +1,41 @@
+///
+/// Calculate the required `padding-bottom` value to reserve page space for an image of a given size, represented by `$size`.
+///
+/// @param {String} $size - A string of the form 'XxY', where 'X' and 'Y' are integers.
+///
+/// @return {Number} - A percentage indicating the appropriate value of `padding-bottom`.
+///
+@function get-padding($size) {
+    $list: str-split($size, 'x');
+
+    $width: to-number(nth($list, 1));
+    $height: to-number(nth($list, 2));
+
+    @return percentage($height/$width);
+}
+
+///
+/// Returns a string representing the width (in pixels) of an image with size `$size`.
+///
+/// @param {String} $size - A string of the form 'XxY', where 'X' and 'Y' are integers.
+///
+/// @return {String} - A string of the form 'Xpx'
+///
+@function get-width($size) {
+	$list: str-split($size, 'x');
+
+    @return nth($list, 1) + 'px';
+}
+
+///
+/// Returns a string representing the width (in pixels) of an image with size `$size`.
+///
+/// @param {String} $size - A string of the form 'XxY', where 'X' and 'Y' are integers.
+///
+/// @return {String} - A string of the form 'Ypx'
+///
+@function get-height($size) {
+	$list: str-split($size, 'x');
+
+    @return nth($list, 2) + 'px';
+}