diff options
| -rw-r--r-- | static/lazy-fallback.js | 19 | ||||
| -rw-r--r-- | static/lazy-loading.js | 42 | ||||
| -rw-r--r-- | static/lazy-show.js | 16 | ||||
| -rw-r--r-- | static/site.css | 2 | ||||
| -rw-r--r-- | upd8.js | 4 |
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> |