Improve img lazy loading (#34804)

Related #32051 and #13526

modules/markup/html_node.go

@@ -63,8 +63,11 @@ func processNodeA(ctx *RenderContext, node *html.Node) {
 
 func visitNodeImg(ctx *RenderContext, img *html.Node) (next *html.Node) {
 	next = img.NextSibling
+	attrSrc, hasLazy := "", false
 	for i, imgAttr := range img.Attr {
+		hasLazy = hasLazy || imgAttr.Key == "loading" && imgAttr.Val == "lazy"
 		if imgAttr.Key != "src" {
+			attrSrc = imgAttr.Val
 			continue
 		}
 
@@ -72,8 +75,8 @@ func visitNodeImg(ctx *RenderContext, img *html.Node) (next *html.Node) {
 		isLinkable := imgSrcOrigin != "" && !strings.HasPrefix(imgSrcOrigin, "data:")
 
 		// By default, the "<img>" tag should also be clickable,
-		// because frontend use `<img>` to paste the re-scaled image into the markdown,
-		// so it must match the default markdown image behavior.
+		// because frontend uses `<img>` to paste the re-scaled image into the Markdown,
+		// so it must match the default Markdown image behavior.
 		cnt := 0
 		for p := img.Parent; isLinkable && p != nil && cnt < 2; p = p.Parent {
 			if hasParentAnchor := p.Type == html.ElementNode && p.Data == "a"; hasParentAnchor {
@@ -98,6 +101,9 @@ func visitNodeImg(ctx *RenderContext, img *html.Node) (next *html.Node) {
 		imgAttr.Val = camoHandleLink(imgAttr.Val)
 		img.Attr[i] = imgAttr
 	}
+	if !RenderBehaviorForTesting.DisableAdditionalAttributes && !hasLazy && !strings.HasPrefix(attrSrc, "data:") {
+		img.Attr = append(img.Attr, html.Attribute{Key: "loading", Val: "lazy"})
+	}
 	return next
 }
 

modules/markup/markdown/markdown_test.go

@@ -47,7 +47,7 @@ func TestRender_StandardLinks(t *testing.T) {
 func TestRender_Images(t *testing.T) {
 	setting.AppURL = AppURL
 
-	test := func(input, expected string) {
+	render := func(input, expected string) {
 		buffer, err := markdown.RenderString(markup.NewTestRenderContext(FullURL), input)
 		assert.NoError(t, err)
 		assert.Equal(t, strings.TrimSpace(expected), strings.TrimSpace(string(buffer)))
@@ -59,27 +59,32 @@ func TestRender_Images(t *testing.T) {
 	result := util.URLJoin(FullURL, url)
 	// hint: With Markdown v2.5.2, there is a new syntax: [link](URL){:target="_blank"} , but we do not support it now
 
-	test(
+	render(
 		"!["+title+"]("+url+")",
 		`<p><a href="`+result+`" target="_blank" rel="nofollow noopener"><img src="`+result+`" alt="`+title+`"/></a></p>`)
 
-	test(
+	render(
 		"[["+title+"|"+url+"]]",
 		`<p><a href="`+result+`" rel="nofollow"><img src="`+result+`" title="`+title+`" alt="`+title+`"/></a></p>`)
-	test(
+	render(
 		"[!["+title+"]("+url+")]("+href+")",
 		`<p><a href="`+href+`" rel="nofollow"><img src="`+result+`" alt="`+title+`"/></a></p>`)
 
-	test(
+	render(
 		"!["+title+"]("+url+")",
 		`<p><a href="`+result+`" target="_blank" rel="nofollow noopener"><img src="`+result+`" alt="`+title+`"/></a></p>`)
 
-	test(
+	render(
 		"[["+title+"|"+url+"]]",
 		`<p><a href="`+result+`" rel="nofollow"><img src="`+result+`" title="`+title+`" alt="`+title+`"/></a></p>`)
-	test(
+	render(
 		"[!["+title+"]("+url+")]("+href+")",
 		`<p><a href="`+href+`" rel="nofollow"><img src="`+result+`" alt="`+title+`"/></a></p>`)
+
+	defer test.MockVariableValue(&markup.RenderBehaviorForTesting.DisableAdditionalAttributes, false)()
+	render(
+		"<a><img src='a.jpg'></a>", // by the way, empty "a" tag will be removed
+		`<p dir="auto"><img src="http://localhost:3000/user13/repo11/a.jpg" loading="lazy"/></p>`)
 }
 
 func TestTotal_RenderString(t *testing.T) {

modules/markup/sanitizer_default.go

@@ -52,6 +52,8 @@ func (st *Sanitizer) createDefaultPolicy() *bluemonday.Policy {
 
 	policy.AllowAttrs("src", "autoplay", "controls").OnElements("video")
 
+	policy.AllowAttrs("loading").OnElements("img")
+
 	// Allow generally safe attributes (reference: https://github.com/jch/html-pipeline)
 	generalSafeAttrs := []string{
 		"abbr", "accept", "accept-charset",