« get me outta code hell

more lazy loading tweaks - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/static/lazy-loading.js
diff options
context:
space:
mode:
author(quasar) nebula <towerofnix@gmail.com>2020-12-10 17:58:36 -0400
committer(quasar) nebula <towerofnix@gmail.com>2020-12-10 17:58:51 -0400
commitd42c5dfc610a1953f798f87a0b8861d8fa5dca9d (patch)
treed3337f804b78b2995f64ff4a14566ad4c7236a3d /static/lazy-loading.js
parent56298f4a826882abcf6f1065ebca7c6490f7e622 (diff)
more lazy loading tweaks
Diffstat (limited to 'static/lazy-loading.js')
-rw-r--r--static/lazy-loading.js42
1 files changed, 34 insertions, 8 deletions
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);