Merge pull request #2465 from patzick/feature/category-page-images

Feature/improve load images on category page

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated to Vue 2.6.6 - @filrak (#2456)
 - Null sidebar menu data on static page fixed - @filrak (#2456)
 - Fix cannot edit previous steps in checkout - @filrak (#2457)
+- Improve images loading on category page, corrected alt view and blinking problem - @patzick (#2465)
 
 ## [1.8.2] - 2019.02.11
 - Fixed docker-compose configuration for network_mode and TS build config - @lukeromanowicz (#2415)

src/themes/default/components/core/ProductTile.vue

@@ -17,14 +17,15 @@
     >
       <div
         class="product-image relative bg-cl-secondary"
-        :class="[{ sale: labelsActive && isOnSale }, { new: labelsActive && isNew }]">
+        :class="[{ sale: labelsActive && isOnSale }, { new: labelsActive && isNew }, {'product-image--loaded': imageLoaded}]">
         <img
+          class="product-image__content"
           :alt="product.name"
           :src="thumbnailObj.src"
-          v-lazy="thumbnailObj"
           height="300"
           width="310"
           data-testid="productImage"
+          @load="imageLoaded = true"
         >
       </div>
 
@@ -62,6 +63,11 @@ import { ProductTile } from '@vue-storefront/core/modules/catalog/components/Pro
 
 export default {
   mixins: [ProductTile],
+  data () {
+    return {
+      imageLoaded: false
+    }
+  },
   props: {
     labelsActive: {
       type: Boolean,
@@ -146,6 +152,25 @@ $color-white: color(white);
   width: 100%;
   overflow: hidden;
   max-height: 300px;
+  height: 270px;
+  display: flex;
+  align-items: flex-end;
+  background-image: url('/assets/placeholder.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 60% auto;
+
+  &__content {
+    display: none;
+  }
+
+  &--loaded {
+    background-image: none;
+
+    .product-image__content {
+      display: block;
+    }
+  }
 
   &:hover {
     img {