Lazy load inline images (#36294).

Patch by Mizuki ISHIKAWA.


git-svn-id: http://svn.redmine.org/redmine/trunk@21313 e93f8b46-1217-0410-a6f0-8f06a7374b81

app/helpers/application_helper.rb

@@ -320,7 +320,8 @@ module ApplicationHelper
       image_tag(
         thumbnail_path(attachment),
         :srcset => "#{thumbnail_path(attachment, :size => thumbnail_size * 2)} 2x",
-        :style => "max-width: #{thumbnail_size}px; max-height: #{thumbnail_size}px;"
+        :style => "max-width: #{thumbnail_size}px; max-height: #{thumbnail_size}px;",
+        :loading => "lazy"
       ),
       attachment_path(
         attachment
@@ -946,7 +947,7 @@ module ApplicationHelper
           if !desc.blank? && alttext.blank?
             alt = " title=\"#{desc}\" alt=\"#{desc}\""
           end
-          "src=\"#{image_url}\"#{alt}"
+          "src=\"#{image_url}\"#{alt} loading=\"lazy\""
         else
           m
         end

test/helpers/application_helper_test.rb

@@ -171,14 +171,14 @@ class ApplicationHelperTest < Redmine::HelperTest
   def test_attached_images
     to_test = {
       'Inline image: !logo.gif!' =>
-         'Inline image: <img src="/attachments/download/3/logo.gif" title="This is a logo" alt="This is a logo" />',
+         'Inline image: <img src="/attachments/download/3/logo.gif" title="This is a logo" alt="This is a logo" loading="lazy" />',
       'Inline image: !logo.GIF!' =>
-         'Inline image: <img src="/attachments/download/3/logo.gif" title="This is a logo" alt="This is a logo" />',
+         'Inline image: <img src="/attachments/download/3/logo.gif" title="This is a logo" alt="This is a logo" loading="lazy" />',
       'No match: !ogo.gif!' => 'No match: <img src="ogo.gif" alt="" />',
       'No match: !ogo.GIF!' => 'No match: <img src="ogo.GIF" alt="" />',
       # link image
       '!logo.gif!:http://foo.bar/' =>
-         '<a href="http://foo.bar/"><img src="/attachments/download/3/logo.gif" title="This is a logo" alt="This is a logo" /></a>',
+         '<a href="http://foo.bar/"><img src="/attachments/download/3/logo.gif" title="This is a logo" alt="This is a logo" loading="lazy" /></a>',
     }
     attachments = Attachment.all
     to_test.each {|text, result| assert_equal "<p>#{result}</p>", textilizable(text, :attachments => attachments)}
@@ -196,8 +196,8 @@ class ApplicationHelperTest < Redmine::HelperTest
       !attached_on_journal.png!'
     RAW
 
-    assert textilizable(raw, :object => journal).include?("<img src=\"/attachments/download/#{attachment_1.id}/attached_on_issue.png\" alt=\"\" />")
-    assert textilizable(raw, :object => journal).include?("<img src=\"/attachments/download/#{attachment_2.id}/attached_on_journal.png\" alt=\"\" />")
+    assert textilizable(raw, :object => journal).include?("<img src=\"/attachments/download/#{attachment_1.id}/attached_on_issue.png\" alt=\"\" loading=\"lazy\" />")
+    assert textilizable(raw, :object => journal).include?("<img src=\"/attachments/download/#{attachment_2.id}/attached_on_journal.png\" alt=\"\" loading=\"lazy\" />")
   end
 
   def test_attached_images_with_textile_and_non_ascii_filename
@@ -208,7 +208,7 @@ class ApplicationHelperTest < Redmine::HelperTest
     with_settings :text_formatting => 'textile' do
       to_test.each do |filename, result|
         attachment = Attachment.generate!(:filename => filename)
-        assert_include %(<img src="/attachments/download/#{attachment.id}/#{result}" alt="" />),
+        assert_include %(<img src="/attachments/download/#{attachment.id}/#{result}" alt="" loading="lazy" />),
                        textilizable("!#{filename}!", :attachments => [attachment])
       end
     end
@@ -224,7 +224,7 @@ class ApplicationHelperTest < Redmine::HelperTest
     with_settings :text_formatting => 'markdown' do
       to_test.each do |filename, result|
         attachment = Attachment.generate!(:filename => filename)
-        assert_include %(<img src="/attachments/download/#{attachment.id}/#{result}" alt="" />),
+        assert_include %(<img src="/attachments/download/#{attachment.id}/#{result}" alt="" loading="lazy" />),
                        textilizable("![](#{filename})", :attachments => [attachment])
       end
     end
@@ -234,7 +234,7 @@ class ApplicationHelperTest < Redmine::HelperTest
     attachment = Attachment.generate!(:filename => 'image@2x.png')
     assert_equal(
       %(<p><img src="/attachments/download/#{attachment.id}/image@2x.png" ) +
-        %(srcset="/attachments/download/#{attachment.id}/image@2x.png 2x" alt="" /></p>),
+        %(srcset="/attachments/download/#{attachment.id}/image@2x.png 2x" alt="" loading="lazy" /></p>),
       textilizable("!image@2x.png!", :attachments => [attachment])
     )
   end
@@ -286,13 +286,13 @@ class ApplicationHelperTest < Redmine::HelperTest
 
     to_test = {
       'Inline image: !testtest.jpg!' =>
-        'Inline image: <img src="/attachments/download/' + a1.id.to_s + '/testtest.JPG" alt="" />',
+        'Inline image: <img src="/attachments/download/' + a1.id.to_s + '/testtest.JPG" alt="" loading="lazy" />',
       'Inline image: !testtest.jpeg!' =>
-        'Inline image: <img src="/attachments/download/' + a2.id.to_s + '/testtest.jpeg" alt="" />',
+        'Inline image: <img src="/attachments/download/' + a2.id.to_s + '/testtest.jpeg" alt="" loading="lazy" />',
       'Inline image: !testtest.jpe!' =>
-        'Inline image: <img src="/attachments/download/' + a3.id.to_s + '/testtest.JPE" alt="" />',
+        'Inline image: <img src="/attachments/download/' + a3.id.to_s + '/testtest.JPE" alt="" loading="lazy" />',
       'Inline image: !testtest.bmp!' =>
-        'Inline image: <img src="/attachments/download/' + a4.id.to_s + '/Testtest.BMP" alt="" />',
+        'Inline image: <img src="/attachments/download/' + a4.id.to_s + '/Testtest.BMP" alt="" loading="lazy" />',
     }
 
     attachments = [a1, a2, a3, a4]
@@ -315,9 +315,9 @@ class ApplicationHelperTest < Redmine::HelperTest
 
     to_test = {
       'Inline image: !testfile.png!' =>
-        'Inline image: <img src="/attachments/download/' + a2.id.to_s + '/testfile.PNG" alt="" />',
+        'Inline image: <img src="/attachments/download/' + a2.id.to_s + '/testfile.PNG" alt="" loading="lazy" />',
       'Inline image: !Testfile.PNG!' =>
-        'Inline image: <img src="/attachments/download/' + a2.id.to_s + '/testfile.PNG" alt="" />',
+        'Inline image: <img src="/attachments/download/' + a2.id.to_s + '/testfile.PNG" alt="" loading="lazy" />',
     }
     attachments = [a1, a2]
     to_test.each {|text, result| assert_equal "<p>#{result}</p>", textilizable(text, :attachments => attachments)}
@@ -1794,7 +1794,7 @@ class ApplicationHelperTest < Redmine::HelperTest
     a = Attachment.find(3)
     assert_select_in(
       thumbnail_tag(a),
-      'a[href=?][title=?] img[src=?]',
+      'a[href=?][title=?] img[src=?][loading="lazy"]',
       "/attachments/3", "logo.gif", "/attachments/thumbnail/3")
   end
 

test/unit/lib/redmine/wiki_formatting/common_mark/application_helper_test.rb

@@ -49,7 +49,7 @@ class Redmine::WikiFormatting::CommonMark::ApplicationHelperTest < Redmine::Help
       with_settings :text_formatting => 'common_mark' do
         to_test.each do |filename, result|
           attachment = Attachment.generate!(:filename => filename)
-          assert_include %(<img src="/attachments/download/#{attachment.id}/#{result}" alt="">), textilizable("![](#{filename})", :attachments => [attachment])
+          assert_include %(<img src="/attachments/download/#{attachment.id}/#{result}" alt="" loading="lazy">), textilizable("![](#{filename})", :attachments => [attachment])
         end
       end
     end