Implement lazy loading for Audio and Video

_includes/blocks/media.liquid

@@ -2,41 +2,57 @@
 {% if include.link %}
 <a href="{{ include.link }}" {% if include.caption %}alt="{{ include.caption }}"{% endif %}>
 {% endif %}
+{% assign file_info = site.static_files | where: "path", include.url %}
 {% if include.type == "image" %}
 <picture
 	class="content"
+	{% if include.lazyload %}data-lazyload=""{% endif %}
+{% comment %}
 	src="{{ include.url | absolute_url }}"
+{% endcomment %}
 	{% if include.width %}width="{{ include.width }}"{% endif %}
 	{% if include.height %}height="{{ include.height }}"{% endif %}>
+	{% if include.lazyload %}<noscript>{% endif %}
 	<img src="{{ include.url | absolute_url }}"
 		{% if include.alt %}alt="{{ include.alt }}"{% endif %}
 		{% if include.width %}width="{{ include.width }}"{% endif %}
 		{% if include.height %}height="{{ include.height }}"{% endif %}>
+	{% if include.lazyload %}</noscript>{% endif %}
 </picture>
 {% elsif include.type == "video" %}
 <video controls
 	class="content"
+	{% if include.lazyload %}data-lazyload=""{% endif %}
 	{% if include.poster %}poster="{{ include.poster | absolute_url }}"{% endif %}
 	{% if include.preload %}preload="{{ include.preload }}"{% endif %}
+{% comment %}
 	src="{{ include.url | absolute_url }}"
+{% endcomment %}
 	{% if include.width %}width="{{ include.width }}"{% endif %}
 	{% if include.height %}height="{{ include.height }}"{% endif %}
 	{% if include.autoplay %}autoplay="true"{% endif %}
 	{% if include.muted %}muted="true"{% endif %}
 	{% if include.loop %}loop="true"{% endif %}>
+	{% if include.lazyload %}<noscript>{% endif %}
 	<source src="{{ include.url | absolute_url }}">
+	{% if include.lazyload %}</noscript>{% endif %}
 </video>
 {% elsif include.type == "audio" %}
 <audio controls
 	class="content"
+	{% if include.lazyload %}data-lazyload=""{% endif %}
 	{% if include.preload %}preload="{{ include.preload }}"{% endif %}
+{% comment %}
 	src="{{ include.url | absolute_url }}"
+{% endcomment %}
 	{% if include.width %}width="{{ include.width }}"{% endif %}
 	{% if include.height %}height="{{ include.height }}"{% endif %}
 	{% if include.autoplay %}autoplay="true"{% endif %}
 	{% if include.muted %}muted="true"{% endif %}
 	{% if include.loop %}loop="true"{% endif %}>
+	{% if include.lazyload %}<noscript>{% endif %}
 	<source src="{{ include.url | absolute_url }}">
+	{% if include.lazyload %}</noscript>{% endif %}
 </audio>
 {% endif %}
 {% if include.link %}

_posts/1993/1993-07-21-lorem-ipsum.html

@@ -23,7 +23,7 @@ Morbi in pulvinar mi. Nam dignissim ut augue sed placerat. Vestibulum ipsum odio
 {% endcapture %}{% include blocks/paragraph.liquid content=content %}
 {% endcapture %}{% include blocks/column.liquid content=column %}
 {% capture column %}
-{% include blocks/media.liquid type="image" float="left" url="http://localhost:4000/assets/logo.svg" height="80px" %}
+{% include blocks/media.liquid type="image" float="left" url="/assets/logo.svg" %}
 {% capture content %}
 Vestibulum euismod egestas dapibus. Sed ut mollis purus. Sed scelerisque vulputate nisl, eget fringilla magna aliquam non. Nam id arcu rhoncus, hendrerit felis cursus, suscipit metus. Fusce pretium tortor eget tellus convallis sodales. Aenean at aliquet urna, et pulvinar tortor. Nulla malesuada vel tellus vel feugiat.
 {% endcapture %}{% include blocks/paragraph.liquid content=content %}

_posts/2022/2022-01-10-h264-encoder-showdown.html

@@ -72,7 +72,7 @@ videos:
                 {% capture column %}
                   {% assign caption=encoder.name %}
                   {% assign real_url=encoder.url | replace: ":video", video.id | replace: ":res", resolution | replace: ":rate", bitrate | absolute_url %}
-                  {% include blocks/media.liquid type="video" url=real_url caption=caption poster=video.poster muted=true preload="none" %}
+                  {% include blocks/media.liquid type="video" url=real_url caption=caption poster=video.poster muted=true preload="none" lazyload=true %}
                 {% endcapture %}{% include blocks/column.liquid content=column %}
               {% endfor %}
             {% endcapture %}{% include blocks/columns.liquid content=columns %}

assets/site.js

@@ -6,4 +6,30 @@
 		document.querySelector("#header #navigation").classList.toggle("open");
 	});
 
+	{ // Lazily load Media
+		let info = {}
+		new Promise((resolve, reject) => {
+			// Figure out what to load.
+			info.elements = document.querySelectorAll(".block-media > [data-lazyload]");
+			info.stack = Array.from(info.elements);
+			console.debug("Lazily loading " + info.stack.length + " elements...");
+
+			// Begin processing at 1ms intervals.
+			info.cbid = 0;
+			info.cbid = window.setInterval(() => {
+				let el = info.stack.pop();
+				let lazycontent = el.querySelector("noscript");
+				el.innerHTML = lazycontent.innerHTML;
+
+				if (info.stack.length == 0) {
+					window.clearInterval(info.cbid);
+					resolve();
+				}
+			}, 1);
+		}).finally(() => {
+			console.debug("Lazy loading complete.");
+			window.clearInterval(info.cbid);
+		});
+	}
+
 })();