Add lazy loading for shaders

utensil · Aug 19, 2024 · e4f726e · e4f726e
1 parent 0828e15
commit e4f726e
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 3 deletions.
diff --git a/assets/images/3d-cube-scan-svgrepo-com.svg b/assets/images/3d-cube-scan-svgrepo-com.svg
diff --git a/assets/shader.js b/assets/shader.js
@@ -44,7 +44,15 @@ embeded_shaders.forEach((element) => {
     let shader = element.textContent;
     element.textContent = '';
 
-    resolveIncludesAsync(shader).then((shader) => {
-        const renderer = ImageEffectRenderer.createTemporary(element, shader, options);
-    });
+    element.classList.add('lazy-loading');
+
+    let handleMouseOver = (event) => {
+        resolveIncludesAsync(shader).then((shader) => {
+            element.classList.remove('lazy-loading');
+            const renderer = ImageEffectRenderer.createTemporary(element, shader, options);
+            element.removeEventListener('mouseover', handleMouseOver);
+        });
+    };
+
+    element.addEventListener('mouseover', handleMouseOver);
 });
diff --git a/assets/uts-style.css b/assets/uts-style.css
@@ -530,7 +530,30 @@ button#langblock-toggle {
     filter: invert(0.85);
 }
 
+@keyframes breathing {
+    0% {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 0.3;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
 .embeded-shader {
     color: transparent;
     padding: 1em 1em 1em 1em;
+}
+
+.embeded-shader.lazy-loading {
+    height: 30ex;
+    background-image: url(./images/3d-cube-scan-svgrepo-com.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 20%;
+    animation: breathing 2s ease-out infinite;
 }