Added lazy loading

index.html

@@ -21,10 +21,11 @@ <h2 class="header">{{ site.full_name }}</h2>
     <div class="footer">Made by <a class="author"
         href="http://andyzhang.net/">Andy Zhang</a></div>
   </body>
-  <script 
+  <script
     src="https://code.jquery.com/jquery-3.2.1.js"
     integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
     crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lazyload.js"></script>
   <script src="js/transition.js"></script>
   <script src="js/zoom.min.js"></script>
   <script src="js/gallery.js"></script>

js/gallery.js

@@ -48,6 +48,29 @@ class Renderer {
     sectionElem.appendChild(header);
     return sectionElem;
   }
+
+  createImageElement(photo, width, height, spacing) {
+    var image = new Image();
+
+    image.style.width = width;
+    image.style.height = height;
+    image.style.marginBottom = spacing;
+    image.onload = onImageLoad;
+    image.setAttribute("data-action", "zoom");
+
+    if (photo.isCompressed()) {
+      // Lazy loading + a compressed image
+      image.setAttribute("data-original", photo.originalSrc());
+      image.setAttribute("data-src", photo.compresedSrc());
+      image.src = photo.placeholderSrc();
+      image.classList.add('lazyload');
+    } else {
+      // Original
+      image.src = photo.src();
+    }
+
+    return image;
+  }
 }
 
 /**
@@ -109,19 +132,10 @@ class VerticalRenderer extends Renderer {
    * Creates one photo
    */
   createPhotoElement(photo, width, config) {
-    var image = new Image();
-
-    image.src = photo.src();
-    image.style.width = px(width);
-    image.style.height = px(photo.height(width));
-    image.style.marginBottom = px(config.spacing);
-    image.onload = onImageLoad;
-
-    if (photo.isCompressed()) {
-      image.setAttribute("data-original", photo.originalSrc());
-    }
-
-    return image;
+    return this.createImageElement(photo,
+                                   px(width),
+                                   px(photo.height(width)),
+                                   px(config.spacing));
   }
 
   /**
@@ -303,21 +317,15 @@ class HorizontalRenderer extends Renderer {
 
     for (var i = 0; i < photos.length; i++) {
       var photo = photos[i];
-      var image = new Image();
-      image.src = photo.src();
-      image.style.width = px(photo.width(finalHeight));
-      image.style.height = px(finalHeight);
-      image.onload = onImageLoad;
+      var image = this.createImageElement(photo,
+                                          px(photo.width(finalHeight)),
+                                          px(finalHeight),
+                                          px(0));
 
       if (i !== 0) {
         image.style.marginLeft = px(config.spacing);
       }
 
-      image.setAttribute("data-action", "zoom");
-      if (photo.isCompressed()) {
-        image.setAttribute("data-original", photo.originalSrc());
-      }
-
       rowElem.appendChild(image);
     }
     return rowElem;
@@ -334,15 +342,13 @@ class Photo {
     this._width = p.width;
     this._height = p.height;
     this._is_compressed = p.compressed;
+    this.placeholder_path = p.placeholder_path;
     this.compressed_path = p.compressed_path;
 
     this.aspectRatio = this._width / parseFloat(this._height);
   };
 
   src() {
-    if (this._is_compressed) {
-      return this.compressed_path;
-    }
     return this.path;
   }
 
@@ -354,6 +360,14 @@ class Photo {
     return this.path;
   }
 
+  compresedSrc() {
+    return this.compressed_path;
+  }
+
+  placeholderSrc() {
+    return this.placeholder_path;
+  }
+
   width(height) {
     return height * this.aspectRatio;
   }

js/script.js

@@ -15,6 +15,7 @@ function reqListener() {
   }
   var config = new Config(JSON.parse(this.responseText), configuration);
   renderer.render(config);
+  lazyload();
 }
 
 

setup.command

@@ -2,11 +2,18 @@
 
 # Create a duplicate of each photo, and then minify them
 if [[ "$OSTYPE" == "darwin"* && -x "$(command -v sips)" ]]; then
-  # sips is available, duplicate all of the images first
-  python tools/duplicate.py
+  # sips is available
+  # low res version of image
+  python tools/duplicate.py min
   sips -Z 640 photos/**/*.min.jpeg &>/dev/null
   sips -Z 640 photos/**/*.min.png &>/dev/null
   sips -Z 640 photos/**/*.min.jpg &>/dev/null
+
+  # placeholder image for lazy loading
+  python tools/duplicate.py placeholder
+  sips -Z 64 photos/**/*.placeholder.jpeg &>/dev/null
+  sips -Z 64 photos/**/*.placeholder.png &>/dev/null
+  sips -Z 64 photos/**/*.placeholder.jpg &>/dev/null
 fi
 
 python tools/setup.py

tools/duplicate.py

@@ -1,31 +1,42 @@
 import os
+import re
 import shutil
+import sys
 
 PHOTO_PATH = './photos/'
 
 
 def is_image_path(path):
-    return path.endswith('jpg') or \
-           path.endswith('jpeg') or \
-           path.endswith('png')
-
-
-def to_min_path(path):
-    # Oh god this code sucks, plz fix
-    if path.endswith('jpg'):
-        return path.replace('.jpg', '.min.jpg')
-    if path.endswith('jpeg'):
-        return path.replace('.jpeg', '.min.jpeg')
-    if path.endswith('png'):
-        return path.replace('.png', '.min.png')
-
-for folder in os.listdir(PHOTO_PATH):
-    # Ignore other files like .DS_Store
-    if not os.path.isdir(PHOTO_PATH + folder):
-        continue
-
-    for f in os.listdir(PHOTO_PATH + folder):
-        path = PHOTO_PATH + folder + '/' + f
-        if is_image_path(path) and '.min.' not in path:
-            min_path = to_min_path(path)
-            shutil.copy(path, min_path)
+    return re.search(r'\.(jpe?g|png)$', path)
+
+
+def get_min_path(path):
+    return re.sub(r'\.(png|jpe?g)$', '.min.\g<1>', path)
+
+
+def get_placeholder_path(path):
+    return re.sub(r'\.(png|jpe?g)$', '.placeholder.\g<1>', path)
+
+
+def get_path(path, ext):
+    return re.sub(r'\.(png|jpe?g)$', '.' + ext + '.\g<1>', path)
+
+
+def is_original(path):
+    return '.min.' not in path and '.placeholder.' not in path
+
+
+def main(ext):
+    for folder in os.listdir(PHOTO_PATH):
+        # Ignore other files like .DS_Store
+        if not os.path.isdir(PHOTO_PATH + folder):
+            continue
+
+        for f in os.listdir(PHOTO_PATH + folder):
+            path = PHOTO_PATH + folder + '/' + f
+            if is_image_path(path) and is_original(path):
+                min_path = get_path(path, ext)
+                shutil.copy(path, min_path)
+
+if __name__ == '__main__':
+    main(sys.argv[1])

tools/setup.py

@@ -15,6 +15,10 @@
 PHOTO_PATH = PATH + RELATIVE_PATH
 
 
+def is_original(path):
+    return '.min.' not in path and '.placeholder.' not in path and is_image_path(path)
+
+
 def is_not_min_path(path):
     return not is_min_path(path) and is_image_path(path)
 
@@ -29,18 +33,24 @@ def get_directories():
 
 
 def is_image_path(path):
-    return path.endswith('jpg') or \
-           path.endswith('jpeg') or \
-           path.endswith('png')
+    return re.search(r'\.(jpe?g|png)$', path)
+
+
+def get_placeholder_path(path):
+    return get_path(path, 'placeholder')
 
 
 def get_min_path(path):
-    return re.sub(r'\.(png|jpe?g)$', '.min.\g<1>', path)
+    return get_path(path, 'min')
+
+
+def get_path(path, ext):
+    return re.sub(r'\.(png|jpe?g)$', '.' + ext + '.\g<1>', path)
 
 
 def get_images(path):
     items = os.listdir(PHOTO_PATH + '/' + path)
-    filtered_items = list(filter(is_image_path, items))
+    filtered_items = list(filter(is_original, items))
 
     result = []
     for img in filtered_items:
@@ -56,7 +66,8 @@ def get_images(path):
             'height': height,
             'path': './' + RELATIVE_PATH + '/' + path + '/' + img,
             'compressed_path': get_min_path(p),
-            'compressed': has_compressed
+            'compressed': has_compressed,
+            'placeholder_path': get_placeholder_path(p)
         })
     return result