Skip to content

Commit 81adb01

Browse files
wxiaoguangwxiaoguang
authored
Improve img lazy loading (#34804)
Related #32051 and #13526
1 parent 0990eb4 commit 81adb01

File tree

11 files changed

+30
-17
lines changed

11 files changed

+30
-17
lines changed

‎modules/markup/html_node.go

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,17 +63,20 @@ func processNodeA(ctx *RenderContext, node *html.Node) {
6363

6464
func visitNodeImg(ctx *RenderContext, img *html.Node) (next *html.Node) {
6565
next = img.NextSibling
66+
attrSrc, hasLazy := "", false
6667
for i, imgAttr := range img.Attr {
68+
hasLazy = hasLazy || imgAttr.Key == "loading" && imgAttr.Val == "lazy"
6769
if imgAttr.Key != "src" {
70+
attrSrc = imgAttr.Val
6871
continue
6972
}
7073

7174
imgSrcOrigin := imgAttr.Val
7275
isLinkable := imgSrcOrigin != "" && !strings.HasPrefix(imgSrcOrigin, "data:")
7376

7477
// By default, the "<img>" tag should also be clickable,
75-
// because frontend use `<img>` to paste the re-scaled image into the markdown,
76-
// so it must match the default markdown image behavior.
78+
// because frontend uses `<img>` to paste the re-scaled image into the Markdown,
79+
// so it must match the default Markdown image behavior.
7780
cnt := 0
7881
for p := img.Parent; isLinkable && p != nil && cnt < 2; p = p.Parent {
7982
if hasParentAnchor := p.Type == html.ElementNode && p.Data == "a"; hasParentAnchor {
@@ -98,6 +101,9 @@ func visitNodeImg(ctx *RenderContext, img *html.Node) (next *html.Node) {
98101
imgAttr.Val = camoHandleLink(imgAttr.Val)
99102
img.Attr[i] = imgAttr
100103
}
104+
if !RenderBehaviorForTesting.DisableAdditionalAttributes && !hasLazy && !strings.HasPrefix(attrSrc, "data:") {
105+
img.Attr = append(img.Attr, html.Attribute{Key: "loading", Val: "lazy"})
106+
}
101107
return next
102108
}
103109

‎modules/markup/markdown/markdown_test.go

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ func TestRender_StandardLinks(t *testing.T) {
4747
func TestRender_Images(t *testing.T) {
4848
setting.AppURL = AppURL
4949

50-
test := func(input, expected string) {
50+
render := func(input, expected string) {
5151
buffer, err := markdown.RenderString(markup.NewTestRenderContext(FullURL), input)
5252
assert.NoError(t, err)
5353
assert.Equal(t, strings.TrimSpace(expected), strings.TrimSpace(string(buffer)))
@@ -59,27 +59,32 @@ func TestRender_Images(t *testing.T) {
5959
result := util.URLJoin(FullURL, url)
6060
// hint: With Markdown v2.5.2, there is a new syntax: [link](URL){:target="_blank"} , but we do not support it now
6161

62-
test(
62+
render(
6363
"!["+title+"]("+url+")",
6464
`<p><a href="`+result+`" target="_blank" rel="nofollow noopener"><img src="`+result+`" alt="`+title+`"/></a></p>`)
6565

66-
test(
66+
render(
6767
"[["+title+"|"+url+"]]",
6868
`<p><a href="`+result+`" rel="nofollow"><img src="`+result+`" title="`+title+`" alt="`+title+`"/></a></p>`)
69-
test(
69+
render(
7070
"[!["+title+"]("+url+")]("+href+")",
7171
`<p><a href="`+href+`" rel="nofollow"><img src="`+result+`" alt="`+title+`"/></a></p>`)
7272

73-
test(
73+
render(
7474
"!["+title+"]("+url+")",
7575
`<p><a href="`+result+`" target="_blank" rel="nofollow noopener"><img src="`+result+`" alt="`+title+`"/></a></p>`)
7676

77-
test(
77+
render(
7878
"[["+title+"|"+url+"]]",
7979
`<p><a href="`+result+`" rel="nofollow"><img src="`+result+`" title="`+title+`" alt="`+title+`"/></a></p>`)
80-
test(
80+
render(
8181
"[!["+title+"]("+url+")]("+href+")",
8282
`<p><a href="`+href+`" rel="nofollow"><img src="`+result+`" alt="`+title+`"/></a></p>`)
83+
84+
defer test.MockVariableValue(&markup.RenderBehaviorForTesting.DisableAdditionalAttributes, false)()
85+
render(
86+
"<a><img src='a.jpg'></a>", // by the way, empty "a" tag will be removed
87+
`<p dir="auto"><img src="http://localhost:3000/user13/repo11/a.jpg" loading="lazy"/></p>`)
8388
}
8489

8590
func TestTotal_RenderString(t *testing.T) {

‎modules/markup/sanitizer_default.go

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@ func (st *Sanitizer) createDefaultPolicy() *bluemonday.Policy {
5252

5353
policy.AllowAttrs("src", "autoplay", "controls").OnElements("video")
5454

55+
policy.AllowAttrs("loading").OnElements("img")
56+
5557
// Allow generally safe attributes (reference: https://github.com/jch/html-pipeline)
5658
generalSafeAttrs := []string{
5759
"abbr", "accept", "accept-charset",

‎services/mailer/mail_test.go

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -528,7 +528,7 @@ func TestEmbedBase64Images(t *testing.T) {
528528
require.NoError(t, err)
529529

530530
mailBody := msgs[0].Body
531-
assert.Regexp(t, `MSG-BEFORE <a[^>]+><img src="data:image/png;base64,iVBORw0KGgo="/></a> MSG-AFTER`, mailBody)
531+
assert.Regexp(t, `MSG-BEFORE <a[^>]+><img src="data:image/png;base64,iVBORw0KGgo=".*/></a> MSG-AFTER`, mailBody)
532532
})
533533

534534
t.Run("EmbedInstanceImageSkipExternalImage", func(t *testing.T) {

‎templates/repo/issue/card.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
{{if $attachments}}
55
<div class="card-attachment-images">
66
{{range $attachments}}
7-
<img src="{{.DownloadURL}}" alt="{{.Name}}" />
7+
<img loading="lazy" src="{{.DownloadURL}}" alt="{{.Name}}" />
88
{{end}}
99
</div>
1010
{{end}}

‎templates/repo/issue/view_content/attachments.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
{{if FilenameIsImage .Name}}
3232
{{if not (StringUtils.Contains (StringUtils.ToString $.RenderedContent) .UUID)}}
3333
<a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}">
34-
<img alt="{{.Name}}" src="{{.DownloadURL}}" title="{{ctx.Locale.Tr "repo.issues.attachment.open_tab" .Name}}">
34+
<img loading="lazy" alt="{{.Name}}" src="{{.DownloadURL}}" title="{{ctx.Locale.Tr "repo.issues.attachment.open_tab" .Name}}">
3535
</a>
3636
{{end}}
3737
{{end}}

‎templates/repo/issue/view_content/comments.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -615,7 +615,7 @@
615615
<div class="timeline-item-group">
616616
<div class="timeline-item event" id="{{.HashTag}}">
617617
<a class="timeline-avatar"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
618-
<img alt src="{{.Poster.AvatarLink ctx}}" width="40" height="40">
618+
<img loading="lazy" alt src="{{.Poster.AvatarLink ctx}}" width="40" height="40">
619619
</a>
620620
<span class="badge grey">{{svg "octicon-x" 16}}</span>
621621
<span class="text grey muted-links">

‎templates/repo/settings/lfs_file.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
{{else if not .IsTextFile}}
2222
<div class="view-raw">
2323
{{if .IsImageFile}}
24-
<img alt="{{$.RawFileLink}}" src="{{$.RawFileLink}}">
24+
<img loading="lazy" alt="{{$.RawFileLink}}" src="{{$.RawFileLink}}">
2525
{{else if .IsVideoFile}}
2626
<video controls src="{{$.RawFileLink}}">
2727
<strong>{{ctx.Locale.Tr "repo.video_not_supported_in_browser"}}</strong>

‎templates/shared/user/profile_big_avatar.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@
103103
<ul class="user-badges">
104104
{{range .Badges}}
105105
<li>
106-
<img width="64" height="64" src="{{.ImageURL}}" alt="{{.Description}}" data-tooltip-content="{{.Description}}">
106+
<img loading="lazy" width="64" height="64" src="{{.ImageURL}}" alt="{{.Description}}" data-tooltip-content="{{.Description}}">
107107
</li>
108108
{{end}}
109109
</ul>

‎templates/user/dashboard/feeds.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
{{range $push.Commits}}
9292
{{$commitLink := printf "%s/commit/%s" $repoLink .Sha1}}
9393
<div class="flex-text-block">
94-
<img alt class="ui avatar" src="{{$push.AvatarLink ctx .AuthorEmail}}" title="{{.AuthorName}}" width="16" height="16">
94+
<img loading="lazy" alt class="ui avatar" src="{{$push.AvatarLink ctx .AuthorEmail}}" title="{{.AuthorName}}" width="16" height="16">
9595
<a class="ui sha label" href="{{$commitLink}}">{{ShortSha .Sha1}}</a>
9696
<span class="text truncate">
9797
{{ctx.RenderUtils.RenderCommitMessage .Message $repo}}

‎web_src/js/components/RepoContributors.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -397,7 +397,7 @@ export default defineComponent({
397397
<div class="ui top attached header tw-flex tw-flex-1">
398398
<b class="ui right">#{{ index + 1 }}</b>
399399
<a :href="contributor.home_link">
400-
<img class="ui avatar tw-align-middle" height="40" width="40" :src="contributor.avatar_link" alt="">
400+
<img loading="lazy" class="ui avatar tw-align-middle" height="40" width="40" :src="contributor.avatar_link" alt="">
401401
</a>
402402
<div class="tw-ml-2">
403403
<a v-if="contributor.home_link !== ''" :href="contributor.home_link"><h4>{{ contributor.name }}</h4></a>

0 commit comments

Comments
 (0)