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

bigcommerce · Oct 19, 2017 · e87dc94 · e87dc94
1 parent 68b06ae
commit e87dc94
Show file tree

Hide file tree

Showing 39 changed files with 348 additions and 54 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,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;
@@ -42,9 +52,14 @@
 
 .card-image {
     border: 0;
-    display: flex;
     margin: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
     width: auto;
+    max-height: 100%;
 }
 
 .card-title {

diff --git a/assets/scss/components/citadel/loading/_loading.scss b/assets/scss/components/citadel/loading/_loading.scss
@@ -11,3 +11,7 @@
     display: none;
     z-index: zIndex("low");
 }
+
+.lazyload, .lazyloading {
+    height:100%;
+}
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,33 @@ $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-left:auto;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+
+    @include breakpoint("medium") {
+        margin-left:0;
+    }
 }
 
 .cart-item-title {
@@ -556,8 +572,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,43 @@
     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-image--default {
+.productView-img-container {
+    position: relative;
+    margin: auto;
+    max-width: get-width(stencilString('product_size'));
+    width: 100%;
+
+    img {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin:auto;
+        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 {

diff --git a/assets/scss/components/stencil/writeReview/_writeReview.scss b/assets/scss/components/stencil/writeReview/_writeReview.scss
@@ -18,9 +18,29 @@
     }
 }
 
+
 .writeReview-form {
 
     @include breakpoint("medium") {
         @include grid-column(6);
     }
 }
+
+.writeReview-productImage-container {
+    position: relative;
+
+    img {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+    }
+}
+
+.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,24 @@
 }
 
 .blog-thumbnail {
-    margin: 0 0 (spacing("base") * 2);
+    margin: 0 auto (spacing("base") * 2);
+    position: relative;
+    max-width: get_width(stencilString('blog_size'));
+
+    img {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        margin: auto;
+    }
+}
+
+.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,29 @@
+.brand-image-container {
+  position: relative;
+  max-width: get-width(stencilString('thumb_size'));
+
+  img {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+  }
+}
+
+.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,36 @@
     }
 }
 
+.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 {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
     max-height: remCalc($header-height) - $header-logo-marginVertical * 2;
 
     @include breakpoint("medium") {
         max-height: none;
     }
 }
 
+
+
 //
 // Mobile Menu Toggle
 //

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';
+}