shii.moe

commit b20c91be88b832d57847ee52c23763d86dd7cd2a
parent 03d7ac9ad6583a9af78d46da3effc228104033f5
Author: knutsen <samuel@knutsen.co>
Date:   Thu, 24 Jun 2021 12:08:13 +0100

Don't show mascot until loaded (JS enabled only)

Diffstat:
M
public/image.js
 | 
6
++++++
M
public/style.css
 | 
5
+++--

2 files changed, 9 insertions(+), 2 deletions(-)
diff --git a/public/image.js b/public/image.js
@@ -2,13 +2,19 @@ const YUI_COUNT = 17;
 
 const mascot = document.getElementById("mascot");
 const favicon = document.querySelector("link[rel~='icon']");
+mascot.style.opacity = 0;
 
 const randomYui = () => {
 	const pick = Math.floor(1 + Math.random() * YUI_COUNT);
 	const stem = "/mascots/" + pick;
+	mascot.style.opacity = 0;
 	mascot.setAttribute("src", stem + ".png");
 	favicon.setAttribute("href", stem + "-square.png");
 
+	const loaded = () => { mascot.style.opacity = .85 };
+	if (mascot.complete) loaded();
+	else mascot.addEventListener('load', loaded);
+
 	useColourScheme({
 		11: 'pink',
 		15: 'green',
diff --git a/public/style.css b/public/style.css
@@ -166,8 +166,9 @@ pre code {
     max-height: var(--mascot-height);
     max-width: var(--mascot-max-width);
     position: fixed;
-    bottom:0em;
-    right:0;
+    bottom: 0;
+    right: 0;
+    transition: all .15s ease;
     opacity: .85;
 }