Merge pull request #157 from Shikkanime/dev

Add an intersection observer
Shikkanime · Feb 8, 2024 · 02a84cc · 02a84cc
2 parents 0a659cc + 5a0bf68
commit 02a84cc
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 24 deletions.
diff --git a/src/main/resources/assets/js/intersection_observer.js b/src/main/resources/assets/js/intersection_observer.js
@@ -0,0 +1,15 @@
+const images = document.querySelectorAll('img[loading="lazy"]');
+
+const observer = new IntersectionObserver((entries, observer) => {
+    entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+            const image = entry.target;
+            image.src = image.dataset.src;
+            observer.unobserve(image);
+        }
+    });
+});
+
+images.forEach((image) => {
+    observer.observe(image);
+});
diff --git a/src/main/resources/templates/site/anime.ftl b/src/main/resources/templates/site/anime.ftl
@@ -24,4 +24,5 @@
     </div>
 
     <script src="/assets/js/hover_cards.js"></script>
+    <script src="/assets/js/intersection_observer.js"></script>
 </@navigation.display>
diff --git a/src/main/resources/templates/site/catalog.ftl b/src/main/resources/templates/site/catalog.ftl
@@ -22,4 +22,5 @@
     </div>
 
     <script src="/assets/js/hover_cards.js"></script>
+    <script src="/assets/js/intersection_observer.js"></script>
 </@navigation.display>
diff --git a/src/main/resources/templates/site/components/anime.ftl b/src/main/resources/templates/site/components/anime.ftl
@@ -3,7 +3,7 @@
         <article>
             <a href="/animes/${anime.slug}" class="text-decoration-none text-white">
                 <div class="hover-card position-relative">
-                    <img loading="lazy" src="https://api.shikkanime.fr/v1/attachments?uuid=${anime.uuid}&type=image"
+                    <img loading="lazy" data-src="https://api.shikkanime.fr/v1/attachments?uuid=${anime.uuid}&type=image"
                          alt="${anime.shortName?replace("\"", "'")} anime image" class="w-100">
                     <span class="h6 mt-2 text-truncate-2">${anime.shortName}</span>
 

diff --git a/src/main/resources/templates/site/components/episode.ftl b/src/main/resources/templates/site/components/episode.ftl
@@ -4,7 +4,7 @@
             <a href="${episode.url}" target="_blank" class="text-decoration-none text-white">
                 <div class="hover-card position-relative">
                     <div class="position-relative">
-                        <img loading="lazy" src="https://api.shikkanime.fr/v1/attachments?uuid=${episode.uuid}&type=image"
+                        <img loading="lazy" data-src="https://api.shikkanime.fr/v1/attachments?uuid=${episode.uuid}&type=image"
                              alt="${episode.anime.shortName?replace("\"", "'")} episode preview image"
                              class="w-100<#if episode.uncensored> blur</#if>">
                         <img src="https://www.shikkanime.fr/assets/img/platforms/${episode.platform.image}"

diff --git a/src/main/resources/templates/site/home.ftl b/src/main/resources/templates/site/home.ftl
@@ -30,4 +30,5 @@
     </div>
 
     <script src="/assets/js/hover_cards.js"></script>
+    <script src="/assets/js/intersection_observer.js"></script>
 </@navigation.display>
diff --git a/src/test/kotlin/fr/shikkanime/AnimeSlug.kt b/src/test/kotlin/fr/shikkanime/AnimeSlug.kt