Add back support for lazy images in comments

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `config.extra.show_backlinks` config variable for showing the backlinks button for linked articles in the article's quick actions.
 - Add `fediverse:creator` meta tag.
 - Add `title` class for use on `<strong>`.
+- Add back support for lazy async images in comments.
 - Add missing translation strings for author separator and conjunctions.
 - Add shortcode for Mastodon post embedding.
 - Add support for blurred media in comments.

static/comments.js

@@ -7,6 +7,7 @@ let dateLocale = document.getElementById("date-locale").textContent;
 let favesFromText = document.getElementById("faves-from-text").textContent;
 let host = document.getElementById("host").textContent;
 let id = document.getElementById("id").textContent;
+let lazyAsyncImage = document.getElementById("lazy-async-image").textContent;
 let loadingText = document.getElementById("loading-text").textContent;
 let noCommentsText = document.getElementById("no-comments-text").textContent;
 let relAttributes = document.getElementById("rel-attributes").textContent;
@@ -41,10 +42,10 @@ function emojify(input, emojis) {
 		img.setAttribute("src", escapeHtml(emoji.static_url));
 		img.setAttribute("alt", `:${emoji.shortcode}:`);
 		img.setAttribute("title", `:${emoji.shortcode}:`);
-		// {% - if config.markdown.lazy_async_image -%}
+		if (lazyAsyncImage == "true") {
-		// img.setAttribute("decoding", "async");
+			img.setAttribute("decoding", "async");
-		// img.setAttribute("loading", "lazy");
+			img.setAttribute("loading", "lazy");
-		// {% - endif -%}
+		}
 
 		picture.appendChild(source);
 		picture.appendChild(img);
@@ -132,10 +133,10 @@ function loadComments() {
 						"alt",
 						`@${status.account.username}@${instance} avatar`
 					);
-					// {% - if config.markdown.lazy_async_image -%}
+					if (lazyAsyncImage == "true") {
-					// avatarImg.setAttribute("decoding", "async");
+						avatarImg.setAttribute("decoding", "async");
-					// avatarImg.setAttribute("loading", "lazy");
+						avatarImg.setAttribute("loading", "lazy");
-					// {% - endif -%}
+					}
 
 					let avatarPicture = document.createElement("picture");
 					avatarPicture.appendChild(avatarSource);
@@ -235,10 +236,10 @@ function loadComments() {
 											mediaElement.setAttribute("title", attachment.description);
 										}
 
-										// {% - if config.markdown.lazy_async_image -%}
+										if (lazyAsyncImage == "true") {
-										// mediaElement.setAttribute("decoding", "async");
+											mediaElement.setAttribute("decoding", "async");
-										// mediaElement.setAttribute("loading", "lazy");
+											mediaElement.setAttribute("loading", "lazy");
-										// {% - endif -%}
+										}
 
 										if (status.sensitive == true) {
 											mediaElement.classList.add("spoiler");

templates/partials/comments.html

@@ -29,10 +29,11 @@
 <span id="view-comment-text" class="hidden">{{ macros_translate::translate(key="view_comment", default="View Comment At", language_strings=language_strings) }}</span>
 <span id="view-profile-text" class="hidden">{{ macros_translate::translate(key="view_profile", default="View Profile At", language_strings=language_strings) }}</span>
 
-{%- if page.extra.comments.uri -%}
+{%- if config.markdown.lazy_async_image %}
-	{%- set uri = page.extra.comments.uri -%}
+	<span id="lazy-async-image" class="hidden">true</span>
-	<span id="post-uri" style="display: none;">{{ uri }}</span>
+{%- else -%}
-{%- endif -%}
+	<span id="lazy-async-image" class="hidden">false</span>
+{%- endif %}
 
 <section id="comments">
 	{%- if config.extra.comments.show_qr -%}