bringing back lazy loading feature

js/remove-lazy-loading.js

@@ -0,0 +1,25 @@
+/*
+ * remove-lazy-loading.js - Removes lazy loading from thread reply images to force them to eagerly load. 
+ * Lazy loading of images helps render threads quicker, but this means that images will only be loaded on scroll.
+ * This impacts the user experience in a negative way since they will often see blank images when scrolling 
+ * while the thumbnails load. This js solves this problem by allowing images to deferred and loaded lazily, 
+ * and once everything has loaded, eagerly load the images at once by removing the lazy attribute.
+ *
+ *
+ * Copyleft (ɔ) 2021 Leftypol Moderation Team
+ *
+ * Usage:
+ * 	$config['additional_javascript'][] = 'js/remove-lazy-loading.js'
+ *
+ */
+
+
+function removeLazyLoading(){
+	if(document.readyState === "complete"){
+		$(".post-image").removeAttr("loading")
+	} else {
+		$(window).on("load", removeLazyLoading)
+	}
+}
+
+$(removeLazyLoading);

templates/header.html

@@ -56,3 +56,10 @@
 				padding: 0 !important;
 			}
 		{% endraw %}</style>{% endif %}
+		{% if 'js/remove-lazy-loading.js' in config.additional_javascript or 'js/remove-lazy-loading.js' in config.additional_javascript_defer %}
+			<noscript>
+				<style type="text/css">
+					.no-script-no-display {display: none;}
+				</style>
+			</noscript>
+		{% endif %}

templates/post/image.html

@@ -24,22 +24,35 @@
 		>
 		</video>
 	{% else %}
-		<img class="post-image" 
-			src="
-				{% if post.thumb == 'file' %}
-					{{ config.root }}
-					{% if config.file_icons[post.filename|extension] %}
-						{{ config.file_thumb|sprintf(config.file_icons[post.filename|extension]) }}
+		{% macro tag(doLazy, config, post) %}
+			<img 
+				class="post-image {{ doLazy ? 'no-script-no-display'}}" 
+				{{ doLazy ? 'loading="lazy"' }}
+				src="
+					{% if post.thumb == 'file' %}
+						{{ config.root }}
+						{% if config.file_icons[post.filename|extension] %}
+							{{ config.file_thumb|sprintf(config.file_icons[post.filename|extension]) }}
+						{% else %}
+							{{ config.file_thumb|sprintf(config.file_icons.default) }}
+						{% endif %}
+					{% elseif post.thumb == 'spoiler' %}
+						{{ config.root }}{{ config.spoiler_image }}
 					{% else %}
-						{{ config.file_thumb|sprintf(config.file_icons.default) }}
+						{{ config.uri_thumb }}{{ post.thumb }}
 					{% endif %}
-				{% elseif post.thumb == 'spoiler' %}
-					{{ config.root }}{{ config.spoiler_image }}
-				{% else %}
-					{{ config.uri_thumb }}{{ post.thumb }}
-				{% endif %}
-			"
-			 style="width:{{ post.thumbwidth }}px;height:{{ post.thumbheight }}px" alt="" 
-		/>
+				"
+				style="width:{{ post.thumbwidth }}px;height:{{ post.thumbheight }}px" alt="" 
+			/>
+		{% endmacro %}
+		{% import _self as image %}
+		{% if 'js/remove-lazy-loading.js' in config.additional_javascript or 'js/remove-lazy-loading.js' in config.additional_javascript_defer %}
+			{{image.tag(true, config, post)}}
+			<noscript>
+				{{image.tag(false, config, post)}}
+			</noscript>
+		{% else %}
+			{{image.tag(false, config, post)}}
+		{% endif %}
 	{% endif %}
 </a>