Resolve "Lazy load images on the Frontend"

13 files changed, 144 insertions, 22 deletions

diff --git a/app/assets/javascripts/copy_as_gfm.js b/app/assets/javascripts/copy_as_gfm.js
index ba9d9a3e1f7..54257531284 100644
--- a/app/assets/javascripts/copy_as_gfm.js
+++ b/app/assets/javascripts/copy_as_gfm.js
@@ -1,6 +1,7 @@
 /* eslint-disable class-methods-use-this, object-shorthand, no-unused-vars, no-use-before-define, no-new, max-len, no-restricted-syntax, guard-for-in, no-continue */
 
 import './lib/utils/common_utils';
+import { placeholderImage } from './lazy_loader';
 
 const gfmRules = {
   // The filters referenced in lib/banzai/pipeline/gfm_pipeline.rb convert
@@ -56,6 +57,11 @@ const gfmRules = {
       return text;
     },
   },
+  ImageLazyLoadFilter: {
+    'img'(el, text) {
+      return `![${el.getAttribute('alt')}](${el.getAttribute('src')})`;
+    },
+  },
   VideoLinkFilter: {
     '.video-container'(el) {
       const videoEl = el.querySelector('video');
@@ -163,7 +169,9 @@ const gfmRules = {
       return text.trim().split('\n').map(s => `> ${s}`.trim()).join('\n');
     },
     'img'(el) {
-      return `![${el.getAttribute('alt')}](${el.getAttribute('src')})`;
+      const imageSrc = el.src;
+      const imageUrl = imageSrc && imageSrc !== placeholderImage ? imageSrc : (el.dataset.src || '');
+      return `![${el.getAttribute('alt')}](${imageUrl})`;
     },
     'a.anchor'(el, text) {
       // Don't render a Markdown link for the anchor link inside a heading
diff --git a/app/assets/javascripts/lazy_loader.js b/app/assets/javascripts/lazy_loader.js
new file mode 100644
index 00000000000..3d64b121fa7
--- /dev/null
+++ b/app/assets/javascripts/lazy_loader.js
@@ -0,0 +1,76 @@
+/* eslint-disable one-export, one-var, one-var-declaration-per-line */
+
+import _ from 'underscore';
+
+export const placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+const SCROLL_THRESHOLD = 300;
+
+export default class LazyLoader {
+  constructor(options = {}) {
+    this.lazyImages = [];
+    this.observerNode = options.observerNode || '#content-body';
+
+    const throttledScrollCheck = _.throttle(() => this.scrollCheck(), 300);
+    const debouncedElementsInView = _.debounce(() => this.checkElementsInView(), 300);
+
+    window.addEventListener('scroll', throttledScrollCheck);
+    window.addEventListener('resize', debouncedElementsInView);
+
+    const scrollContainer = options.scrollContainer || window;
+    scrollContainer.addEventListener('load', () => this.loadCheck());
+  }
+  searchLazyImages() {
+    this.lazyImages = [].slice.call(document.querySelectorAll('.lazy'));
+    this.checkElementsInView();
+  }
+  startContentObserver() {
+    const contentNode = document.querySelector(this.observerNode) || document.querySelector('body');
+
+    if (contentNode) {
+      const observer = new MutationObserver(() => this.searchLazyImages());
+
+      observer.observe(contentNode, {
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+  loadCheck() {
+    this.searchLazyImages();
+    this.startContentObserver();
+  }
+  scrollCheck() {
+    requestAnimationFrame(() => this.checkElementsInView());
+  }
+  checkElementsInView() {
+    const scrollTop = pageYOffset;
+    const visHeight = scrollTop + innerHeight + SCROLL_THRESHOLD;
+    let imgBoundRect, imgTop, imgBound;
+
+    // Loading Images which are in the current viewport or close to them
+    this.lazyImages = this.lazyImages.filter((selectedImage) => {
+      if (selectedImage.getAttribute('data-src')) {
+        imgBoundRect = selectedImage.getBoundingClientRect();
+
+        imgTop = scrollTop + imgBoundRect.top;
+        imgBound = imgTop + imgBoundRect.height;
+
+        if (scrollTop < imgBound && visHeight > imgTop) {
+          LazyLoader.loadImage(selectedImage);
+          return false;
+        }
+
+        return true;
+      }
+      return false;
+    });
+  }
+  static loadImage(img) {
+    if (img.getAttribute('data-src')) {
+      img.setAttribute('src', img.getAttribute('data-src'));
+      img.removeAttribute('data-src');
+      img.classList.remove('lazy');
+      img.classList.add('js-lazy-loaded');
+    }
+  }
+}
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 26c67fb721c..44b502cdab3 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -109,6 +109,7 @@ import './label_manager';
 import './labels';
 import './labels_select';
 import './layout_nav';
+import LazyLoader from './lazy_loader';
 import './line_highlighter';
 import './logo';
 import './member_expiration_date';
@@ -166,6 +167,11 @@ window.addEventListener('load', function onLoad() {
   gl.utils.handleLocationHash();
 }, false);
 
+gl.lazyLoader = new LazyLoader({
+  scrollContainer: window,
+  observerNode: '#content-body'
+});
+
 $(function () {
   var $body = $('body');
   var $document = $(document);
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index 06f7af33f94..0dfa7a31d31 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -35,6 +35,8 @@
   width: 40px;
   height: 40px;
   padding: 0;
+  background: $avatar-background;
+  overflow: hidden;
 
   &.avatar-inline {
     float: none;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 8a58c1ed567..befd8133be0 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -11,8 +11,17 @@
   }
 
   img {
-    max-width: 100%;
+    /*max-width: 100%;*/
     margin: 0 0 8px;
+    min-width: 200px;
+    min-height: 100px;
+    background-color: $gray-lightest;
+  }
+
+  img.js-lazy-loaded {
+    min-width: none;
+    min-height: none;
+    background-color: none;
   }
 
   p a:not(.no-attachment-icon) img {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 7016208f624..cf0a1ad57d0 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -379,7 +379,9 @@ $issue-boards-card-shadow: rgba(186, 186, 186, 0.5);
 * Avatar
 */
 $avatar_radius: 50%;
-$avatar-border: $border-color;
+$avatar-border: $gray-normal;
+$avatar-border-hover: $gray-darker;
+$avatar-background: $gray-lightest;
 $gl-avatar-size: 40px;
 
 /*
diff --git a/app/helpers/avatars_helper.rb b/app/helpers/avatars_helper.rb
index bbe7f3c8fb4..0e068d4b51c 100644
--- a/app/helpers/avatars_helper.rb
+++ b/app/helpers/avatars_helper.rb
@@ -11,17 +11,12 @@ module AvatarsHelper
   def user_avatar_without_link(options = {})
     avatar_size = options[:size] || 16
     user_name = options[:user].try(:name) || options[:user_name]
-    css_class = options[:css_class] || ''
     avatar_url = options[:url] || avatar_icon(options[:user] || options[:user_email], avatar_size)
     data_attributes = { container: 'body' }
 
-    if options[:lazy]
-      data_attributes[:src] = avatar_url
-    end
-
     image_tag(
-      options[:lazy] ? '' : avatar_url,
-      class: "avatar has-tooltip s#{avatar_size} #{css_class}",
+      avatar_url,
+      class: %W[avatar has-tooltip s#{avatar_size}].push(*options[:css_class]),
       alt: "#{user_name}'s avatar",
       title: user_name,
       data: data_attributes
diff --git a/app/helpers/emails_helper.rb b/app/helpers/emails_helper.rb
index fdbca789d21..5f11fe62030 100644
--- a/app/helpers/emails_helper.rb
+++ b/app/helpers/emails_helper.rb
@@ -61,8 +61,8 @@ module EmailsHelper
     else
       image_tag(
         image_url('mailers/gitlab_header_logo.gif'),
-        size: "55x50",
-        alt: "GitLab"
+        size: '55x50',
+        alt: 'GitLab'
       )
     end
   end
diff --git a/app/helpers/lazy_image_tag_helper.rb b/app/helpers/lazy_image_tag_helper.rb
new file mode 100644
index 00000000000..2c5619ac41b
--- /dev/null
+++ b/app/helpers/lazy_image_tag_helper.rb
@@ -0,0 +1,24 @@
+module LazyImageTagHelper
+  def placeholder_image
+    "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+  end
+
+  # Override the default ActionView `image_tag` helper to support lazy-loading
+  def image_tag(source, options = {})
+    options = options.symbolize_keys
+
+    unless options.delete(:lazy) == false
+      options[:data] ||= {}
+      options[:data][:src] = path_to_image(source)
+      options[:class] ||= ""
+      options[:class] << " lazy"
+
+      source = placeholder_image
+    end
+
+    super(source, options)
+  end
+
+  # Required for Banzai::Filter::ImageLazyLoadFilter
+  module_function :placeholder_image
+end
diff --git a/app/helpers/version_check_helper.rb b/app/helpers/version_check_helper.rb
index 456598b4c28..3b175251446 100644
--- a/app/helpers/version_check_helper.rb
+++ b/app/helpers/version_check_helper.rb
@@ -2,7 +2,7 @@ module VersionCheckHelper
   def version_status_badge
     if Rails.env.production? && current_application_settings.version_check_enabled
       image_url = VersionCheck.new.url
-      image_tag image_url, class: 'js-version-status-badge'
+      image_tag image_url, class: 'js-version-status-badge', lazy: false
     end
   end
 end
diff --git a/app/models/concerns/cache_markdown_field.rb b/app/models/concerns/cache_markdown_field.rb
index 95152dcd68c..48547a938fc 100644
--- a/app/models/concerns/cache_markdown_field.rb
+++ b/app/models/concerns/cache_markdown_field.rb
@@ -11,7 +11,7 @@ module CacheMarkdownField
   extend ActiveSupport::Concern
 
   # Increment this number every time the renderer changes its output
-  CACHE_VERSION = 1
+  CACHE_VERSION = 2
 
   # changes to these attributes cause the cache to be invalidates
   INVALIDATED_BY = %w[author project].freeze
diff --git a/app/views/projects/blob/viewers/_image.html.haml b/app/views/projects/blob/viewers/_image.html.haml
index 640d59b3174..1650aa8197f 100644
--- a/app/views/projects/blob/viewers/_image.html.haml
+++ b/app/views/projects/blob/viewers/_image.html.haml
@@ -1,2 +1,2 @@
 .file-content.image_file
-  %img{ src: blob_raw_url, alt: viewer.blob.name }
+  %img{ 'data-src': blob_raw_url, alt: viewer.blob.name }
diff --git a/app/views/projects/diffs/viewers/_image.html.haml b/app/views/projects/diffs/viewers/_image.html.haml
index 33d3dcbeafa..05877ceed3d 100644
--- a/app/views/projects/diffs/viewers/_image.html.haml
+++ b/app/views/projects/diffs/viewers/_image.html.haml
@@ -8,7 +8,7 @@
   .image
     %span.wrap
       .frame{ class: (diff_file.deleted_file? ? 'deleted' : 'added') }
-        %img{ src: blob_raw_path, alt: diff_file.file_path }
+        %img{ 'data-src': blob_raw_path, alt: diff_file.file_path }
       %p.image-info= number_to_human_size(blob.size)
 - else
   .image
@@ -16,7 +16,7 @@
       %span.wrap
         .frame.deleted
           %a{ href: project_blob_path(@project, tree_join(diff_file.old_content_sha, diff_file.old_path)) }
-            %img{ src: old_blob_raw_path, alt: diff_file.old_path }
+            %img{ 'data-src': old_blob_raw_path, alt: diff_file.old_path }
         %p.image-info.hide
           %span.meta-filesize= number_to_human_size(old_blob.size)
           |
@@ -28,7 +28,7 @@
       %span.wrap
         .frame.added
           %a{ href: project_blob_path(@project, tree_join(diff_file.content_sha, diff_file.new_path)) }
-            %img{ src: blob_raw_path, alt: diff_file.new_path }
+            %img{ 'data-src': blob_raw_path, alt: diff_file.new_path }
         %p.image-info.hide
           %span.meta-filesize= number_to_human_size(blob.size)
           |
@@ -41,10 +41,10 @@
     .swipe.view.hide
       .swipe-frame
         .frame.deleted
-          %img{ src: old_blob_raw_path, alt: diff_file.old_path }
+          %img{ 'data-src': old_blob_raw_path, alt: diff_file.old_path }
         .swipe-wrap
           .frame.added
-            %img{ src: blob_raw_path, alt: diff_file.new_path }
+            %img{ 'data-src': blob_raw_path, alt: diff_file.new_path }
         %span.swipe-bar
           %span.top-handle
           %span.bottom-handle
@@ -52,9 +52,9 @@
     .onion-skin.view.hide
       .onion-skin-frame
         .frame.deleted
-          %img{ src: old_blob_raw_path, alt: diff_file.old_path }
+          %img{ 'data-src': old_blob_raw_path, alt: diff_file.old_path }
         .frame.added
-          %img{ src: blob_raw_path, alt: diff_file.new_path }
+          %img{ 'data-src': blob_raw_path, alt: diff_file.new_path }
         .controls
           .transparent
           .drag-track