Update onPoint

js/lazyload-images.js

@@ -0,0 +1,41 @@
+// credit: https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/
+
+// create config object: rootMargin and threshold
+// are two properties exposed by the interface
+// more information: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+const config = {
+  // margin around the root element defaulting to the viewport
+  rootMargin: '500px 0px 500px 0px',
+  // how much of the image has to be on screen to load the image
+  threshold: 0
+};
+
+// register the config object with an instance
+// of intersectionObserver
+let observer = new IntersectionObserver(onCloseToVisibleArea, config);
+
+window.addEventListener("load", function () {
+  const imgs = document.querySelectorAll('img[data-src]');
+  imgs.forEach(img => {
+    observer.observe(img);
+  });
+})
+
+function onCloseToVisibleArea(entries, self) {
+  // iterate over each entry
+  entries.forEach(entry => {
+    // process just the images that are intersecting.
+    // isIntersecting is a property exposed by the interface
+    if (entry.isIntersecting) {
+      // custom function that copies the path to the img
+      // from data-src to src
+      preloadImage(entry.target);
+      // the image is now in place, stop watching
+      self.unobserve(entry.target);
+    }
+  });
+}
+
+function preloadImage(imgTag) {
+  imgTag.setAttribute("src", imgTag.getAttribute("data-src"));
+}

layouts/root.html

@@ -20,17 +20,20 @@
 		</script>
 		<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
 		<script id="MathJax-script" async="true" src="lib/mathjax/es5/tex-mml-chtml.js"></script>
+		<script src="js/lazyload-images.js"></script>
+
+		<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
 		<script>
 			MathJax = {
-					tex: {
-						inlineMath: [
-							['$', '$'], ['\\(', '\\)']
-						]
-					},
-					svg: {
-						fontCache: 'global'
-					}
-				};
+				tex: {
+					inlineMath: [
+						['$', '$'], ['\\(', '\\)']
+					]
+				},
+				svg: {
+					fontCache: 'global'
+				}
+			};
 		</script>
 	</body>
 </html>

onpoint

@@ -1 +1 @@
-Subproject commit b87940ccd5a37829fa00d7b5994d6a53dd611f7b
+Subproject commit 3f7bd12ea014fbf3a08fe536c02107e9fe9d0e7b