resolves #3961 add loading attribute to image macro

lib/asciidoctor/converter/html5.rb

@@ -627,17 +627,25 @@ def convert_image node
     target = node.attr 'target'
     width_attr = (node.attr? 'width') ? %( width="#{node.attr 'width'}") : ''
     height_attr = (node.attr? 'height') ? %( height="#{node.attr 'height'}") : ''
+
+    # https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading
+    loading_attr_value = (node.attr 'loading') || (node.document.attr 'image-loading')
+    if loading_attr_value && loading_attr_value != 'eager' && loading_attr_value != 'lazy'
+      logger.warn 'valid values for attribute "loading" are "eager" and "lazy". found: ' + loading_attr_value
+    end
+    loading_attr = loading_attr_value ? %( loading="#{loading_attr_value}") : ''
+
     if ((node.attr? 'format', 'svg') || (target.include? '.svg')) && node.document.safe < SafeMode::SECURE
       if node.option? 'inline'
         img = (read_svg_contents node, target) || %(<span class="alt">#{node.alt}</span>)
       elsif node.option? 'interactive'
-        fallback = (node.attr? 'fallback') ? %(<img src="#{node.image_uri node.attr 'fallback'}" alt="#{encode_attribute_value node.alt}"#{width_attr}#{height_attr}#{@void_element_slash}>) : %(<span class="alt">#{node.alt}</span>)
+        fallback = (node.attr? 'fallback') ? %(<img src="#{node.image_uri node.attr 'fallback'}" alt="#{encode_attribute_value node.alt}"#{width_attr}#{height_attr}#{loading_attr}#{@void_element_slash}>) : %(<span class="alt">#{node.alt}</span>)
         img = %(<object type="image/svg+xml" data="#{src = node.image_uri target}"#{width_attr}#{height_attr}>#{fallback}</object>)
       else
-        img = %(<img src="#{src = node.image_uri target}" alt="#{encode_attribute_value node.alt}"#{width_attr}#{height_attr}#{@void_element_slash}>)
+        img = %(<img src="#{src = node.image_uri target}" alt="#{encode_attribute_value node.alt}"#{width_attr}#{height_attr}#{loading_attr}#{@void_element_slash}>)
       end
     else
-      img = %(<img src="#{src = node.image_uri target}" alt="#{encode_attribute_value node.alt}"#{width_attr}#{height_attr}#{@void_element_slash}>)
+      img = %(<img src="#{src = node.image_uri target}" alt="#{encode_attribute_value node.alt}"#{width_attr}#{height_attr}#{loading_attr}#{@void_element_slash}>)
     end
     if (node.attr? 'link') && ((href_attr_val = node.attr 'link') != 'self' || (href_attr_val = src))
       img = %(<a class="image" href="#{href_attr_val}"#{(append_link_constraint_attrs node).join}>#{img}</a>)
@@ -1211,6 +1219,14 @@ def convert_inline_image node
       attrs = (node.attr? 'width') ? %( width="#{node.attr 'width'}") : ''
       attrs = %(#{attrs} height="#{node.attr 'height'}") if node.attr? 'height'
       attrs = %(#{attrs} title="#{node.attr 'title'}") if node.attr? 'title'
+
+      # https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading
+      loading_attr_value = (node.attr 'loading') || (node.document.attr 'image-loading')
+      if loading_attr_value && loading_attr_value != 'eager' && loading_attr_value != 'lazy'
+        logger.warn 'valid values for attribute "loading" are "eager" and "lazy". found: ' + loading_attr_value
+      end
+      attrs = %(#{attrs} loading="#{loading_attr_value}") if loading_attr_value
+
       if ((node.attr? 'format', 'svg') || (target.include? '.svg')) && node.document.safe < SafeMode::SECURE
         if node.option? 'inline'
           img = (read_svg_contents node, target) || %(<span class="alt">#{node.alt}</span>)

test/blocks_test.rb

@@ -3086,6 +3086,82 @@ def names
       assert_xpath '//img[@src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="][@alt="Dot"]', output, 1
       assert_message @logger, :WARN, 'image has illegal reference to ancestor of jail; recovering automatically'
     end
+
+    test 'can convert block image with attribute loading=eager' do
+      input = 'image::image.png[loading=eager]'
+      output = convert_string input
+      img = xmlnodes_at_xpath '//img', output, 1
+      assert_equal 'eager', img.attr('loading')
+    end
+
+    test 'can convert block image with attribute loading=lazy' do
+      input = 'image::image.png[loading=lazy]'
+      output = convert_string input
+      img = xmlnodes_at_xpath '//img', output, 1
+      assert_equal 'lazy', img.attr('loading')
+    end
+
+    test 'defaults to global image-loading attribute if not specified on block image' do
+      input = <<~EOS
+      :image-loading: lazy
+
+      image::image.png[]
+      EOS
+
+      output = convert_string input
+      img = xmlnodes_at_xpath '//img', output, 1
+      assert_equal 'lazy', img.attr('loading')
+    end
+
+    test 'specifying loading attribute on block image overrides global value' do
+      input = <<~EOS
+      :image-loading: lazy
+
+      image::image.png[loading=eager]
+      EOS
+
+      output = convert_string input
+      img = xmlnodes_at_xpath '//img', output, 1
+      assert_equal 'eager', img.attr('loading')
+    end
+
+    test 'can convert inline image with attribute loading=eager' do
+      input = 'image:image.png[loading=eager]'
+      output = convert_string input
+      img = xmlnodes_at_xpath '//img', output, 1
+      assert_equal 'eager', img.attr('loading')
+    end
+
+    test 'can convert inline image with attribute loading=lazy' do
+      input = 'image:image.png[loading=lazy]'
+      output = convert_string input
+      img = xmlnodes_at_xpath '//img', output, 1
+      assert_equal 'lazy', img.attr('loading')
+    end
+
+    test 'defaults to global image-loading attribute if not specified on inline image' do
+      input = <<~EOS
+      :image-loading: lazy
+
+      image:image.png[]
+      EOS
+
+      output = convert_string input
+      img = xmlnodes_at_xpath '//img', output, 1
+      assert_equal 'lazy', img.attr('loading')
+    end
+
+    test 'specifying loading attribute on inline image overrides global value' do
+      input = <<~EOS
+      :image-loading: lazy
+
+      image:image.png[loading=eager]
+      EOS
+
+      output = convert_string input
+      img = xmlnodes_at_xpath '//img', output, 1
+      assert_equal 'eager', img.attr('loading')
+    end
   end
 
   context 'Media' do