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

bigcommerce · Oct 18, 2017 · 1e34b23 · 1e34b23
1 parent 68b06ae
commit 1e34b23
Show file tree

Hide file tree

Showing 32 changed files with 224 additions and 52 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Draft
 - Use appropriately-sized (50x50) images for product thumbnails on product details page [#1097](https://github.com/bigcommerce/cornerstone/pull/1097)
+- Load visible images before images below the fold [#1104](https://github.com/bigcommerce/cornerstone/pull/1104)
+- Save space for lazy loading images while they are loading [#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)

diff --git a/assets/scss/components/citadel/cards/_cards.scss b/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-figure:after {
+    content: '';
+    display: block;
+    padding-bottom: get-padding(stencilString('productgallery_size'));
+}
+
 .card-figcaption {
     display: none;
     margin: $card-figcaption-margin;
@@ -42,9 +48,12 @@
 
 .card-image {
     border: 0;
-    display: flex;
     margin: auto;
-    width: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
 }
 
 .card-title {

diff --git a/assets/scss/components/stencil/account/_account.scss b/assets/scss/components/stencil/account/_account.scss
@@ -43,7 +43,10 @@
     }
 
     .account-product-image {
-        width: auto;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        margin: auto;
     }
 }
 
@@ -74,6 +77,12 @@
     width: 70px;
 }
 
+.account-product-figure:after {
+    content: '';
+    display: block;
+    padding-bottom: get-padding(stencilString('productthumb_size'));
+}
+
 .account-product-download {
     border-radius: 50%;
     height: remCalc(33px);

diff --git a/assets/scss/components/stencil/cart/_cart.scss b/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,37 @@ $cart-item-label-offset:                $cart-thumbnail-maxWidth + $cart-item-sp
 
     @include breakpoint("medium") {
         float: none;
-        text-align: left;
         width: grid-calc(1, $total-columns);
     }
 }
 
+.cart-item-figure:after {
+    content: '';
+    display: block;
+    height: 0;
+    width: 100%;
+    padding-bottom: get-padding(stencilString('productthumb_size'));
+}
+
 .cart-item-fixed-image {
     width: 100%;
 }
 
 .cart-item-image {
-    width: auto;
+    position:absolute;
+    margin:auto;
+    margin-right:0;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    max-width: 100%;
+
+    @include breakpoint("medium") {
+        margin-right:auto;
+        margin-left:0;
+
+    }
 }
 
 .cart-item-title {
@@ -556,8 +576,24 @@ $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 {
+        position: absolute;
+        margin: auto;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+}
+
+.previewCartItem-image:after {
+    content: '';
+    display: block;
+    padding-bottom: get-padding(stencilString('productthumb_size'));
 }
 
 .previewCartItem-content {

diff --git a/assets/scss/components/stencil/productView/_productView.scss b/assets/scss/components/stencil/productView/_productView.scss
@@ -22,25 +22,42 @@
     align-items: center;
     display: flex;
     justify-content: center;
-    margin: 0;
+    margin: auto;
     position: relative;
 
     @include breakpoint("medium") {
         min-height: 366px;
         min-width: inherit;
     }
 
+    + .productView-thumbnails {
+        margin-top: spacing("half");
+    }
+
     img {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin:auto;
         width: 100%;
     }
+}
 
-    .productView-image--default {
-        width: auto;
-    }
+.productView-img-container {
+    position: relative;
+    margin: auto;
+    max-width: get-width(stencilString('product_size'));
+    width: 100%;
+}
 
-    + .productView-thumbnails {
-        margin-top: spacing("half");
-    }
+.productView-img-container:after {
+    content: '';
+    display: block;
+    height: 0;
+    width: 100%;
+    padding-bottom: get-padding(stencilString('product_size'));
 }
 
 .productView-thumbnails {

diff --git a/assets/scss/tools/_image.scss b/assets/scss/tools/_image.scss
@@ -0,0 +1,21 @@
+// http://sassmeister.com/gist/1b4f2da5527830088e4d
+@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);
+}
+
+@function get-width($size) {
+	$list: str-split($size, 'x');
+
+    @return nth($list, 1) + 'px';
+}
+
+@function get-height($size) {
+	$list: str-split($size, 'x');
+
+    @return nth($list, 2) + 'px';
+}
diff --git a/assets/scss/tools/_string.scss b/assets/scss/tools/_string.scss
@@ -8,3 +8,66 @@
 
     @return $string;
 }
+
+// https://stackoverflow.com/questions/32376461/how-to-split-a-string-into-two-lists-of-numbers-in-sass
+@function str-split($string, $separator) {
+
+   $index : str-index($string,  $separator);
+
+   $str-1 : str-slice($string, 1, $index - 1);
+   $str-2 : str-slice($string, $index + 1);
+
+   @return $str-1 $str-2;
+}
+
+// https://www.sassmeister.com/gist/9fa19d254864f33d4a80
+@function to-number($value) {
+  @if type-of($value) == 'number' {
+    @return $value;
+  } @else if type-of($value) != 'string' {
+    $_: log('Value for `to-number` should be a number or a string.');
+  }
+
+  $result: 0;
+  $digits: 0;
+  $minus: str-slice($value, 1, 1) == '-';
+  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
+
+  @for $i from if($minus, 2, 1) through str-length($value) {
+    $character: str-slice($value, $i, $i);
+
+    @if not (index(map-keys($numbers), $character) or $character == '.') {
+      @return to-length(if($minus, -$result, $result), str-slice($value, $i))
+    }
+
+    @if $character == '.' {
+      $digits: 1;
+    } @else if $digits == 0 {
+      $result: $result * 10 + map-get($numbers, $character);
+    } @else {
+      $digits: $digits * 10;
+      $result: $result + map-get($numbers, $character) / $digits;
+    }
+  }
+
+  @return if($minus, -$result, $result);;
+}
+
+
+///
+/// Add `$unit` to `$value`
+///
+/// @param {Number} $value - Value to add unit to
+/// @param {String} $unit - String representation of the unit
+///
+/// @return {Number} - `$value` expressed in `$unit`
+///
+@function to-length($value, $unit) {
+  $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
+
+  @if not index(map-keys($units), $unit) {
+    $_: log('Invalid unit `#{$unit}`.');
+  }
+
+  @return $value * map-get($units, $unit);
+}
diff --git a/assets/scss/tools/_tools.scss b/assets/scss/tools/_tools.scss
@@ -1,2 +1,3 @@
 @import "list";
 @import "string";
+@import "image";
diff --git a/templates/components/account/order-contents.html b/templates/components/account/order-contents.html
@@ -21,10 +21,12 @@ <h5 class="account-listShipping-title">{{lang 'account.orders.details.ship_to_mu
             </div>
             <figure class="account-product-figure">
                 {{#if type '===' 'giftcertificate'}}
-                    <img src="{{cdn ../../theme_settings.default_image_gift_certificate}}" alt="Gift Certificate" title="Gift Certificate">
+                    <img class="lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{cdn ../../theme_settings.default_image_gift_certificate}}" alt="Gift Certificate" title="Gift Certificate">
                 {{else}}
-                    <img class="account-product-image"
-                         src="{{getImage image 'productthumb_size' (cdn ../../theme_settings.default_image_product)}}"
+                    <img class="account-product-image lazyload"
+                         data-sizes="auto"
+                         src="{{cdn 'img/loading.svg'}}"
+                         data-src="{{getImage image 'productthumb_size' (cdn ../../theme_settings.default_image_product)}}"
                          alt="{{image.alt}}"
                          title="{{image.alt}}">
                 {{/if}}

diff --git a/templates/components/account/orders-list.html b/templates/components/account/orders-list.html
@@ -6,10 +6,12 @@ <h3 class="account-heading">{{lang 'account.orders.heading' }}</h3>
         <div class="account-product">
             <div class="account-product-figure">
                 {{#if items.0.type '===' 'giftcertificate'}}
-                    <img src="{{cdn ../../theme_settings.default_image_gift_certificate}}" alt="GiftCertificate" title="GiftCertificate">
+                    <img class="lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{cdn ../../theme_settings.default_image_gift_certificate}}" alt="GiftCertificate" title="GiftCertificate">
                 {{else}}
-                    <img class="account-product-image"
-                         src="{{getImage image 'productthumb_size' (cdn ../theme_settings.default_image_product)}}"
+                    <img class="account-product-image lazyload"
+                         data-sizes="auto"
+                         src="{{cdn 'img/loading.svg'}}"
+                         data-src="{{getImage image 'productthumb_size' (cdn ../theme_settings.default_image_product)}}"
                          alt="{{image.alt}}"
                          title="{{image.alt}}">
                 {{/if}}

diff --git a/templates/components/account/returns-list.html b/templates/components/account/returns-list.html
@@ -5,7 +5,7 @@ <h3 class="account-heading">{{lang 'account.returns.heading' }}</h3>
     <li class="account-listItem">
         <div class="account-product">
             <div class="account-product-figure">
-                <img src="{{getImage product.image 'productthumb_size'}}" alt="{{product.image.alt}}" title="{{product.image.alt}}">
+                <img class="lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage product.image 'productthumb_size'}}" alt="{{product.image.alt}}" title="{{product.image.alt}}">
             </div>
             <div class="account-product-body">
                 <div class="account-orderStatus">

diff --git a/templates/components/amp/products/options/product-list.html b/templates/components/amp/products/options/product-list.html
@@ -25,7 +25,7 @@
                 <li class="productOptions-list-item" data-product-attribute-value="{{id}}">
                     {{#if image}}
                         <figure class="productOptions-list-item-figure">
-                            <img class="productOptions-list-item-image" src="{{getImage image 'productthumb_size'}}" alt="{{image.alt}}" title="{{image.alt}}">
+                            <img class="productOptions-list-item-image lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage image 'productthumb_size'}}" alt="{{image.alt}}" title="{{image.alt}}">
                         </figure>
                     {{/if}}
                     <div class="productOptions-list-item-content">

diff --git a/templates/components/blog/post.html b/templates/components/blog/post.html
@@ -3,7 +3,7 @@
         {{#if post.thumbnail}}
             <figure class="blog-thumbnail">
                 <a href="{{post.url}}">
-                    <img src="{{getImage post.thumbnail 'blog_size'}}" alt="{{post.thumbnail.alt}}" title="{{post.thumbnail.alt}}">
+                    <img class="lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage post.thumbnail 'blog_size'}}" alt="{{post.thumbnail.alt}}" title="{{post.thumbnail.alt}}">
                 </a>
             </figure>
         {{/if}}

diff --git a/templates/components/cart/content.html b/templates/components/cart/content.html
@@ -12,9 +12,9 @@
             <tr class="cart-item" data-item-row>
                 <td class="cart-item-block cart-item-figure">
                     {{#if type '==' 'GiftCertificate'}}
-                        <img class="cart-item-fixed-image" src="{{cdn ../../theme_settings.default_image_gift_certificate}}" alt="GiftCertificate" title="GiftCertificate">
+                        <img class="cart-item-fixed-image lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{cdn ../../theme_settings.default_image_gift_certificate}}" alt="GiftCertificate" title="GiftCertificate">
                     {{else}}
-                        <img class="cart-item-image" src="{{getImage image 'productthumb_size' (cdn ../../theme_settings.default_image_product)}}" alt="{{image.alt}}" title="{{image.alt}}">
+                        <img class="cart-item-image lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage image 'productthumb_size' (cdn ../../theme_settings.default_image_product)}}" alt="{{image.alt}}" title="{{image.alt}}">
                     {{/if}}
                 </td>
                 <td class="cart-item-block cart-item-title">

diff --git a/templates/components/cart/preview.html b/templates/components/cart/preview.html
@@ -54,10 +54,14 @@ <h2 class="modal-header-title">
         <section class="productView">
             {{#with cart.added_item}}
                 <figure class="productView-image">
-                    <img class="productView-image--cart"
-                         src="{{getImage image 'product_size' (cdn ../theme_settings.default_image_product)}}"
-                         alt="{{image.alt}}"
-                         title="{{image.alt}}" />
+                    <div class="productView-img-container">
+                        <img class="productView-image--cart lazyload"
+                            data-sizes="auto"
+                            src="{{cdn 'img/loading.svg'}}"
+                            data-src="{{getImage image 'product_size' (cdn ../theme_settings.default_image_product)}}"
+                            alt="{{image.alt}}"
+                            title="{{image.alt}}" />
+                    </div>
                 </figure>
 
                 <div class="productView-details">

diff --git a/templates/components/cart/shipping-quotes.html b/templates/components/cart/shipping-quotes.html
@@ -43,7 +43,7 @@
                                 <input id="shipping-quote-{{type}}-{{id}}" class="shipping-quote" type="radio" name="shipping_method" value="{{id}}">
                                 <label class="estimator-form-label-text" for="shipping-quote-{{type}}-{{id}}">
                                     {{#if logo_path}}
-                                        <img src="{{logo_path}}" alt="{{description}}" title="{{description}}">
+                                        <img class="lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{logo_path}}" alt="{{description}}" title="{{description}}">
                                     {{/if}}
                                     {{provider_name}} &mdash; {{description}}
                                 </label>