Merge pull request #350 from sphereio/lazy-load-img

Lazy load thumbnail images, closes #349
commercetools · Jan 25, 2016 · 5724cd6 · 5724cd6
2 parents bcdd270 + 3fd9506
commit 5724cd6
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/input/assets/js/main.js b/input/assets/js/main.js
@@ -205,6 +205,34 @@ $("ul#bzoom").each(function(index, ul) {
   });
 });
 
+
+// Lazy loading for images
+var loadImage = function(self, imgSource) {
+  self.hide();
+  if (self.is("img")) {
+    self.attr("src", imgSource);
+  } else {
+    self.css("background-image", "url('" + imgSource + "')");
+  }
+  self.fadeIn("slow");
+  return self.removeClass("img-lazy").removeAttr("data-original");
+};
+
+var placeholder = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
+$(".img-lazy").each(function() {
+  var self = $(this);
+  if (self.parent().is(":visible")) {
+    if (self.is("img")) {
+      self.attr("src", placeholder);
+    }
+    var imgSource = self.data("original");
+    return $("<img />").bind("load", function() {
+      return loadImage(self, imgSource);
+    }).attr("src", imgSource);
+  }
+});
+
+
 // Toggle hidden/sliced description
 $(function() {
   var hiddenDescription = $('p.pdp-product-description'),

diff --git a/input/templates/partials/catalog/product-thumbnail.hbs b/input/templates/partials/catalog/product-thumbnail.hbs
@@ -11,7 +11,7 @@
         <span class="sr-only">{{i18n "catalog:wishlist.add"}}</span>
       </button>
     </form>
-    <img class="pop-product-image" src="{{thumbnail.product.variant.image}}" alt="{{thumbnail.product.variant.name}}" width="200" />
+    <img class="pop-product-image img-lazy" data-original="{{thumbnail.product.variant.image}}" alt="{{thumbnail.product.variant.name}}" width="200" />
     <div class="pop-product-name">
       <span class="name-headline">{{thumbnail.product.variant.name}}</span>
       <span class="name-subline">{{thumbnail.product.variant.description}}</span>