From 0d03a01a9fe1c5d67c0bc0c47a8d3cc5f1f09ccf Mon Sep 17 00:00:00 2001
From: Michael Fabian 'Xaymar' Dirks <info@xaymar.com>
Date: Wed, 12 Jan 2022 05:53:50 +0100
Subject: [PATCH] Implement lazy loading for Audio and Video

---
 _includes/blocks/media.liquid                 | 16 ++++++++++++
 _posts/1993/1993-07-21-lorem-ipsum.html       |  2 +-
 .../2022-01-10-h264-encoder-showdown.html     |  2 +-
 assets/site.js                                | 26 +++++++++++++++++++
 4 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/_includes/blocks/media.liquid b/_includes/blocks/media.liquid
index e287363..2d90575 100644
--- a/_includes/blocks/media.liquid
+++ b/_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 %}
diff --git a/_posts/1993/1993-07-21-lorem-ipsum.html b/_posts/1993/1993-07-21-lorem-ipsum.html
index c067f2f..f7f0d92 100644
--- a/_posts/1993/1993-07-21-lorem-ipsum.html
+++ b/_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 %}
diff --git a/_posts/2022/2022-01-10-h264-encoder-showdown.html b/_posts/2022/2022-01-10-h264-encoder-showdown.html
index 779266b..9e21f61 100644
--- a/_posts/2022/2022-01-10-h264-encoder-showdown.html
+++ b/_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 %}
diff --git a/assets/site.js b/assets/site.js
index 9a7a910..a353142 100644
--- a/assets/site.js
+++ b/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);
+		});
+	}
+
 })();