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

bigcommerce · Oct 20, 2017 · 6bd8c50 · 6bd8c50
1 parent 2a60583
commit 6bd8c50
Show file tree

Hide file tree

Showing 41 changed files with 364 additions and 61 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## 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, 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)

diff --git a/assets/scss/components/_components.scss b/assets/scss/components/_components.scss
@@ -61,6 +61,9 @@
 // Alerts
 @import "foundation/alerts/component";
 
+// Lazy Load
+@import "foundation/lazyLoad/component";
+
 
 // Citadel components
 // -----------------------------------------------------------------------------

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,16 @@
     }
 }
 
+.card-img-container {
+    max-width: get-width(stencilString('productgallery_size'));
+}
+
+.card-img-container:after {
+    content: '';
+    display: block;
+    padding-bottom: get-padding(stencilString('productgallery_size'));
+}
+
 .card-figcaption {
     display: none;
     margin: $card-figcaption-margin;
@@ -41,10 +51,10 @@
 }
 
 .card-image {
+    @include lazy-loaded-img;
     border: 0;
-    display: flex;
-    margin: auto;
     width: auto;
+    max-height: 100%;
 }
 
 .card-title {

diff --git a/assets/scss/components/foundation/lazyLoad/_component.scss b/assets/scss/components/foundation/lazyLoad/_component.scss
@@ -0,0 +1,7 @@
+// =============================================================================
+// LAZY LOAD
+// =============================================================================
+
+
+// Component
+@import "lazyLoad";
diff --git a/assets/scss/components/foundation/lazyLoad/_lazyLoad.scss b/assets/scss/components/foundation/lazyLoad/_lazyLoad.scss
@@ -0,0 +1,13 @@
+
+.lazyload, .lazyloading {
+  height:100%;
+}
+
+@mixin lazy-loaded-img() {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
diff --git a/assets/scss/components/stencil/account/_account.scss b/assets/scss/components/stencil/account/_account.scss
@@ -43,7 +43,7 @@
     }
 
     .account-product-image {
-        width: auto;
+        @include lazy-loaded-img;
     }
 }
 
@@ -74,6 +74,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,28 @@ $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;
+    @include lazy-loaded-img;
+
+    @include breakpoint("medium") {
+        margin-left:0;
+    }
 }
 
 .cart-item-title {
@@ -568,8 +579,19 @@ $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;
+    }
+}
+
+.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,38 @@
     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");
-    }
+.productView-img-container:after {
+    content: '';
+    display: block;
+    height: 0;
+    width: 100%;
+    padding-bottom: get-padding(stencilString('product_size'));
 }
 
 .productView-thumbnails {
@@ -64,14 +77,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;
     }
 }

diff --git a/assets/scss/components/stencil/writeReview/_writeReview.scss b/assets/scss/components/stencil/writeReview/_writeReview.scss
@@ -18,9 +18,24 @@
     }
 }
 
+
 .writeReview-form {
 
     @include breakpoint("medium") {
         @include grid-column(6);
     }
 }
+
+.writeReview-productImage-container {
+    position: relative;
+
+    img {
+        @include lazy-loaded-img;
+    }
+}
+
+.writeReview-productImage-container:after {
+    content: '';
+    display: block;
+    padding-bottom: get-padding(stencilString('product_size'));
+}
diff --git a/assets/scss/layouts/_layouts.scss b/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";
 

diff --git a/assets/scss/layouts/blog/_blog.scss b/assets/scss/layouts/blog/_blog.scss
@@ -61,7 +61,19 @@
 }
 
 .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;
+    }
+}
+
+.blog-thumbnail:after {
+    content: '';
+    display: block;
+    padding-bottom: get-padding(stencilString('blog_size'));
 }
 
 .blog-post-figure {

diff --git a/assets/scss/layouts/brands/_brand.scss b/assets/scss/layouts/brands/_brand.scss
@@ -0,0 +1,24 @@
+.brand-image-container {
+  position: relative;
+  max-width: get-width(stencilString('thumb_size'));
+
+  img {
+    @include lazy-loaded-img;
+  }
+}
+
+.brand-image-container:after {
+  content: '';
+  display: block;
+  padding-bottom: get-padding(stencilString('thumb_size'));
+}
+
+.brand {
+  .card-img-container {
+    max-width: get-width(stencilString('brand_size'));
+  }
+
+  .card-img-container:after {
+    padding-bottom: get-padding(stencilString('brand_size'));
+  }
+}
diff --git a/assets/scss/layouts/brands/_brandGrid.scss b/assets/scss/layouts/brands/_brandGrid.scss
@@ -36,4 +36,8 @@
             text-align: center;
         }
     }
+
+    .card-figure:after {
+        padding-bottom: get-padding(stencilString('brand_size'));
+    }
 }
diff --git a/assets/scss/layouts/header/_header.scss b/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
 //