Resolve "Lazy load images on the Frontend"

5 files changed, 20 insertions, 2 deletions

diff --git a/lib/banzai/filter/gollum_tags_filter.rb b/lib/banzai/filter/gollum_tags_filter.rb
index 0ea4eeaed5b..2e259904673 100644
--- a/lib/banzai/filter/gollum_tags_filter.rb
+++ b/lib/banzai/filter/gollum_tags_filter.rb
@@ -118,7 +118,7 @@ module Banzai
         end
 
         if path
-          content_tag(:img, nil, src: path, class: 'gfm')
+          content_tag(:img, nil, data: { src: path }, class: 'gfm')
         end
       end
 
diff --git a/lib/banzai/filter/image_lazy_load_filter.rb b/lib/banzai/filter/image_lazy_load_filter.rb
new file mode 100644
index 00000000000..7a81d583b82
--- /dev/null
+++ b/lib/banzai/filter/image_lazy_load_filter.rb
@@ -0,0 +1,16 @@
+module Banzai
+  module Filter
+    # HTML filter that moves the value of the src attribute to the data-src attribute so it can be lazy loaded
+    class ImageLazyLoadFilter < HTML::Pipeline::Filter
+      def call
+        doc.xpath('descendant-or-self::img').each do |img|
+          img['class'] ||= '' << 'lazy'
+          img['data-src'] = img['src']
+          img['src'] = LazyImageTagHelper.placeholder_image          
+        end
+        
+        doc
+      end
+    end
+  end
+end
diff --git a/lib/banzai/filter/image_link_filter.rb b/lib/banzai/filter/image_link_filter.rb
index 123c92fd250..f318c425962 100644
--- a/lib/banzai/filter/image_link_filter.rb
+++ b/lib/banzai/filter/image_link_filter.rb
@@ -10,7 +10,7 @@ module Banzai
           link = doc.document.create_element(
             'a',
             class: 'no-attachment-icon',
-            href: img['src'],
+            href: img['data-src'] || img['src'],
             target: '_blank',
             rel: 'noopener noreferrer'
           )
diff --git a/lib/banzai/filter/relative_link_filter.rb b/lib/banzai/filter/relative_link_filter.rb
index 9e23c8f8c55..c2fed57a0d8 100644
--- a/lib/banzai/filter/relative_link_filter.rb
+++ b/lib/banzai/filter/relative_link_filter.rb
@@ -22,6 +22,7 @@ module Banzai
 
         doc.css('img, video').each do |el|
           process_link_attr el.attribute('src')
+          process_link_attr el.attribute('data-src')
         end
 
         doc
diff --git a/lib/banzai/pipeline/gfm_pipeline.rb b/lib/banzai/pipeline/gfm_pipeline.rb
index bd4d1aa9ff8..3208abfc538 100644
--- a/lib/banzai/pipeline/gfm_pipeline.rb
+++ b/lib/banzai/pipeline/gfm_pipeline.rb
@@ -16,6 +16,7 @@ module Banzai
           Filter::MathFilter,
           Filter::UploadLinkFilter,
           Filter::VideoLinkFilter,
+          Filter::ImageLazyLoadFilter,
           Filter::ImageLinkFilter,
           Filter::EmojiFilter,
           Filter::TableOfContentsFilter,