more lazy loading tweaks

5 files changed, 36 insertions, 47 deletions

diff --git a/static/lazy-fallback.js b/static/lazy-fallback.js
deleted file mode 100644
index a66b922c..00000000
--- a/static/lazy-fallback.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// Fall8ack code for lazy loading. 8asically, this runs if the stuff in
-// lazy-loading.js doesn't; while that file's written with the same kinda
-// modern syntax/APIs used all over the site, displaying the images is a pretty
-// damn important thing to do, so we have this goodol' Olde JavaScripte fix for
-// 8rowsers which have JS ena8led (and so won't display gener8ted <noscript>
-// tags) 8ut don't support what we use for lazy loading.
-
-if (!window.lazyLoadingExecuted) {
-    lazyLoadingFallback();
-}
-
-function lazyLoadingFallback() {
-    var lazyElements = document.getElementsByClassName('lazy');
-    for (var i = 0; i < lazyElements.length; i++) {
-        var element = lazyElements[i];
-        var original = element.getAttribute('data-original');
-        element.setAttribute('src', original);
-    }
-}
diff --git a/static/lazy-loading.js b/static/lazy-loading.js
index 22f95eb0..a403d7ca 100644
--- a/static/lazy-loading.js
+++ b/static/lazy-loading.js
@@ -1,11 +1,18 @@
 // Lazy loading! Roll your own. Woot.
+// This file includes a 8unch of fall8acks and stuff like that, and is written
+// with fairly Olden JavaScript(TM), so as to work on pretty much any 8rowser
+// with JS ena8led. (If it's disa8led, there are gener8ted <noscript> tags to
+// work there.)
+
+var observer;
 
 function loadImage(image) {
     image.src = image.dataset.original;
 }
 
 function lazyLoad(elements) {
-    for (const item of elements) {
+    for (var i = 0; i < elements.length; i++) {
+        var item = elements[i];
         if (item.intersectionRatio > 0) {
             observer.unobserve(item.target);
             loadImage(item.target);
@@ -13,13 +20,32 @@ function lazyLoad(elements) {
     }
 }
 
-const observer = new IntersectionObserver(lazyLoad, {
-    rootMargin: '200px',
-    threshold: 1.0
-});
+function lazyLoadMain() {
+    // This is a live HTMLCollection! We can't iter8te over it normally 'cuz
+    // we'd 8e mutating its value just 8y interacting with the DOM elements it
+    // contains. A while loop works just fine, even though you'd think reading
+    // over this code that this would 8e an infinitely hanging loop. It isn't!
+    var elements = document.getElementsByClassName('js-hide');
+    while (elements.length) {
+        elements[0].classList.remove('js-hide');
+    }
 
-for (const image of document.querySelectorAll('img.lazy')) {
-    observer.observe(image);
+    var lazyElements = document.getElementsByClassName('lazy');
+    if (window.IntersectionObserver) {
+        observer = new IntersectionObserver(lazyLoad, {
+            rootMargin: '200px',
+            threshold: 1.0
+        });
+        for (var i = 0; i < lazyElements.length; i++) {
+            observer.observe(lazyElements[i]);
+        }
+    } else {
+        for (var i = 0; i < lazyElements.length; i++) {
+            var element = lazyElements[i];
+            var original = element.getAttribute('data-original');
+            element.setAttribute('src', original);
+        }
+    }
 }
 
-window.lazyLoadingExecuted = true;
+document.addEventListener('DOMContentLoaded', lazyLoadMain);
diff --git a/static/lazy-show.js b/static/lazy-show.js
deleted file mode 100644
index c6a1bf25..00000000
--- a/static/lazy-show.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// Kinda like lazy-fallback.js in that this should work on any 8rowser, period.
-// Shows the lazy loading images iff JS is enabled (so that you don't have a
-// duplicate image if JS is disabled).
-
-lazyLoadingShowHiddenImages();
-
-function lazyLoadingShowHiddenImages() {
-    // This is a live HTMLCollection! We can't iter8te over it normally 'cuz
-    // we'd 8e mutating its value just 8y interacting with the DOM elements it
-    // contains. A while loop works just fine, even though you'd think reading
-    // over this code that this would 8e an infinitely hanging loop. It isn't!
-    var elements = document.getElementsByClassName('js-hide');
-    while (elements.length) {
-        elements[0].classList.remove('js-hide');
-    }
-}
diff --git a/static/site.css b/static/site.css
index 2892dd87..016f74c4 100644
--- a/static/site.css
+++ b/static/site.css
@@ -335,7 +335,7 @@ a.box:focus:not(:focus-visible) {
 a.box img {
     display: block;
     width: 100%;
-    height: auto;
+    height: 100%;
 }
 
 h1 {
diff --git a/upd8.js b/upd8.js
index 5f49bddd..122dc600 100644
--- a/upd8.js
+++ b/upd8.js
@@ -1094,12 +1094,10 @@ async function writePage(directoryParts, {
                 <meta name="viewport" content="width=device-width, initial-scale=1">
                 ${Object.entries(meta).map(([ key, value ]) => `<meta ${key}="${escapeAttributeValue(value)}">`).join('\n')}
                 <link rel="stylesheet" href="${C.STATIC_DIRECTORY}/site.css">
+                <script src="${C.STATIC_DIRECTORY}/lazy-loading.js"></script>
             </head>
             <body ${attributes({style: body.style || ''})}>
                 ${layoutHTML}
-                <script src="${C.STATIC_DIRECTORY}/lazy-show.js"></script>
-                <script src="${C.STATIC_DIRECTORY}/lazy-loading.js"></script>
-                <script src="${C.STATIC_DIRECTORY}/lazy-fallback.js"></script>
                 <script src="${C.COMMON_DIRECTORY}/common.js"></script>
                 <script src="data.js"></script>
                 <script src="${C.STATIC_DIRECTORY}/client.js"></script>