From 3c6d9d74a48f07c0f6b85fea10628abca1710f27 Mon Sep 17 00:00:00 2001
From: Luke <Luke.zhang2004@gmail.com>
Date: Sun, 20 Jun 2021 08:50:14 -0400
Subject: [PATCH] Lazy load images (#613)

---
 .../Writers/Html/MessageGroupTemplate.cshtml   | 18 +++++++++---------
 .../Writers/Html/PreambleTemplate.cshtml       |  4 ++--
 .../MarkdownVisitors/HtmlMarkdownVisitor.cs    |  4 ++--
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml b/DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml
index 351a6ea..0f5b4c4 100644
--- a/DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml
+++ b/DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml
@@ -52,7 +52,7 @@
         <div class="chatlog__reference">
             @if (Model.MessageGroup.ReferencedMessage is not null)
             {
-                <img class="chatlog__reference-avatar" src="@await ResolveUrlAsync(Model.MessageGroup.ReferencedMessage.Author.AvatarUrl)" alt="Avatar">
+                <img loading="lazy" class="chatlog__reference-avatar" src="@await ResolveUrlAsync(Model.MessageGroup.ReferencedMessage.Author.AvatarUrl)" alt="Avatar">
                 <span class="chatlog__reference-name" title="@Model.MessageGroup.ReferencedMessage.Author.FullName" style="@referencedUserColorStyle">@referencedUserNick</span>
                 <div class="chatlog__reference-link" onclick="scrollToMessage(event, '@Model.MessageGroup.ReferencedMessage.Id')">
                     <span class="chatlog__reference-content">
@@ -81,7 +81,7 @@
         </div>
     }
     <div class="chatlog__author-avatar-container">
-        <img class="chatlog__author-avatar" src="@await ResolveUrlAsync(Model.MessageGroup.Author.AvatarUrl)" alt="Avatar">
+        <img loading="lazy" class="chatlog__author-avatar" src="@await ResolveUrlAsync(Model.MessageGroup.Author.AvatarUrl)" alt="Avatar">
     </div>
     <div class="chatlog__messages">
         <span class="chatlog__author-name" title="@Model.MessageGroup.Author.FullName" data-user-id="@Model.MessageGroup.Author.Id" style="@userColorStyle">@userNick</span>
@@ -120,7 +120,7 @@
                                 @if (attachment.IsImage)
                                 {
                                     <a href="@await ResolveUrlAsync(attachment.Url)">
-                                        <img class="chatlog__attachment-thumbnail" src="@await ResolveUrlAsync(attachment.Url)" alt="Image attachment" title="@($"Image: {attachment.FileName} ({attachment.FileSize})")">
+                                        <img loading="lazy" class="chatlog__attachment-thumbnail" src="@await ResolveUrlAsync(attachment.Url)" alt="Image attachment" title="@($"Image: {attachment.FileName} ({attachment.FileSize})")">
                                     </a>
                                 }
                                 else if (attachment.IsVideo)
@@ -182,7 +182,7 @@
                                         <div class="chatlog__embed-author">
                                             @if (!string.IsNullOrWhiteSpace(embed.Author.IconUrl))
                                             {
-                                                <img class="chatlog__embed-author-icon" src="@await ResolveUrlAsync(embed.Author.IconProxyUrl ?? embed.Author.IconUrl)" alt="Author icon">
+                                                <img loading="lazy" class="chatlog__embed-author-icon" src="@await ResolveUrlAsync(embed.Author.IconProxyUrl ?? embed.Author.IconUrl)" alt="Author icon">
                                             }
 
                                             @if (!string.IsNullOrWhiteSpace(embed.Author.Name))
@@ -261,7 +261,7 @@
                                 {
                                     <div class="chatlog__embed-thumbnail-container">
                                         <a class="chatlog__embed-thumbnail-link" href="@await ResolveUrlAsync(embed.Thumbnail.ProxyUrl ?? embed.Thumbnail.Url)">
-                                            <img class="chatlog__embed-thumbnail" src="@await ResolveUrlAsync(embed.Thumbnail.ProxyUrl ?? embed.Thumbnail.Url)" alt="Thumbnail">
+                                            <img loading="lazy" class="chatlog__embed-thumbnail" src="@await ResolveUrlAsync(embed.Thumbnail.ProxyUrl ?? embed.Thumbnail.Url)" alt="Thumbnail">
                                         </a>
                                     </div>
                                 }
@@ -271,7 +271,7 @@
                             {
                                 <div class="chatlog__embed-image-container">
                                     <a class="chatlog__embed-image-link" href="@await ResolveUrlAsync(embed.Image.ProxyUrl ?? embed.Image.Url)">
-                                        <img class="chatlog__embed-image" src="@await ResolveUrlAsync(embed.Image.ProxyUrl ?? embed.Image.Url)" alt="Image">
+                                        <img loading="lazy" class="chatlog__embed-image" src="@await ResolveUrlAsync(embed.Image.ProxyUrl ?? embed.Image.Url)" alt="Image">
                                     </a>
                                 </div>
                             }
@@ -281,7 +281,7 @@
                                 <div class="chatlog__embed-footer">
                                     @if (!string.IsNullOrWhiteSpace(embed.Footer?.IconUrl))
                                     {
-                                        <img class="chatlog__embed-footer-icon" src="@await ResolveUrlAsync(embed.Footer.IconProxyUrl ?? embed.Footer.IconUrl)" alt="Footer icon">
+                                        <img loading="lazy" class="chatlog__embed-footer-icon" src="@await ResolveUrlAsync(embed.Footer.IconProxyUrl ?? embed.Footer.IconUrl)" alt="Footer icon">
                                     }
 
                                     <span class="chatlog__embed-footer-text">
@@ -312,7 +312,7 @@
                         @foreach (var reaction in message.Reactions)
                         {
                             <div class="chatlog__reaction" title="@reaction.Emoji.Code">
-                                <img class="emoji emoji--small" alt="@reaction.Emoji.Name" src="@await ResolveUrlAsync(reaction.Emoji.ImageUrl)">
+                                <img loading="lazy" class="emoji emoji--small" alt="@reaction.Emoji.Name" src="@await ResolveUrlAsync(reaction.Emoji.ImageUrl)">
                                 <span class="chatlog__reaction-count">@reaction.Count</span>
                             </div>
                         }
@@ -321,4 +321,4 @@
             </div>
         }
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/DiscordChatExporter.Core/Exporting/Writers/Html/PreambleTemplate.cshtml b/DiscordChatExporter.Core/Exporting/Writers/Html/PreambleTemplate.cshtml
index 517373f..d385d7b 100644
--- a/DiscordChatExporter.Core/Exporting/Writers/Html/PreambleTemplate.cshtml
+++ b/DiscordChatExporter.Core/Exporting/Writers/Html/PreambleTemplate.cshtml
@@ -67,7 +67,7 @@
 
 <div class="preamble">
     <div class="preamble__guild-icon-container">
-        <img class="preamble__guild-icon" src="@await ResolveUrlAsync(Model.ExportContext.Request.Guild.IconUrl)" alt="Guild icon">
+        <img loading="lazy" class="preamble__guild-icon" src="@await ResolveUrlAsync(Model.ExportContext.Request.Guild.IconUrl)" alt="Guild icon">
     </div>
     <div class="preamble__entries-container">
         <div class="preamble__entry">@Model.ExportContext.Request.Guild.Name</div>
@@ -98,4 +98,4 @@
     </div>
 </div>
 
-<div class="chatlog">
\ No newline at end of file
+<div class="chatlog">
diff --git a/DiscordChatExporter.Core/Exporting/Writers/MarkdownVisitors/HtmlMarkdownVisitor.cs b/DiscordChatExporter.Core/Exporting/Writers/MarkdownVisitors/HtmlMarkdownVisitor.cs
index a05ca70..9f122e4 100644
--- a/DiscordChatExporter.Core/Exporting/Writers/MarkdownVisitors/HtmlMarkdownVisitor.cs
+++ b/DiscordChatExporter.Core/Exporting/Writers/MarkdownVisitors/HtmlMarkdownVisitor.cs
@@ -131,7 +131,7 @@ namespace DiscordChatExporter.Core.Exporting.Writers.MarkdownVisitors
             var jumboClass = _isJumbo ? "emoji--large" : "";
 
             _buffer
-                .Append($"<img class=\"emoji {jumboClass}\" alt=\"{emoji.Name}\" title=\"{emoji.Code}\" src=\"{emojiImageUrl}\">");
+                .Append($"<img loading=\"lazy\" class=\"emoji {jumboClass}\" alt=\"{emoji.Name}\" title=\"{emoji.Code}\" src=\"{emojiImageUrl}\">");
 
             return base.VisitEmoji(emoji);
         }
@@ -179,4 +179,4 @@ namespace DiscordChatExporter.Core.Exporting.Writers.MarkdownVisitors
             return buffer.ToString();
         }
     }
-}
\ No newline at end of file
+}