Resolve "Lazy load images on the Frontend"

4 files changed, 29 insertions, 10 deletions

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