simple-icons · mondeja · Apr 5, 2023 · Apr 5, 2023 · Apr 5, 2023
diff --git a/locales/es.po b/locales/es.po
@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: simple-icons-website\n"
 "Report-Msgid-Bugs-To: https://github.com/simple-icons/simple-icons-website/issues\n"
 "POT-Creation-Date: 2022-09-25T01:25:24.834Z\n"
-"PO-Revision-Date: 2022-10-02 16:42+0800\n"
+"PO-Revision-Date: 2023-04-05T20:12:22.666Z\n"
 "Last-Translator: @mondeja <https://github.com/mondeja>\n"
 "Language-Team: es <https://github.com/simple-icons>\n"
 "Language: es\n"
@@ -67,9 +67,6 @@ msgstr "Envía una petición"
 msgid "$iconTitle SVG"
 msgstr "SVG de $iconTitle"
 
-msgid "$iconTitle icon"
-msgstr "Icono de $iconTitle"
-
 msgid "$iconTitle guidelines"
 msgstr "Directrices de $iconTitle"
 

diff --git a/locales/fr.po b/locales/fr.po
@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: simple-icons-website\n"
 "Report-Msgid-Bugs-To: https://github.com/simple-icons/simple-icons-website/issues\n"
 "POT-Creation-Date: 2022-09-25T01:25:24.834Z\n"
-"PO-Revision-Date: 2022-10-02 16:42+0800\n"
+"PO-Revision-Date: 2023-04-05T20:12:22.666Z\n"
 "Last-Translator: @mondeja <https://github.com/mondeja>\n"
 "Language-Team: fr <https://github.com/simple-icons>\n"
 "Language: fr\n"
@@ -79,9 +79,6 @@ msgstr "Soumettre une demande"
 msgid "$iconTitle SVG"
 msgstr "$iconTitle SVG"
 
-msgid "$iconTitle icon"
-msgstr "Icône $iconTitle"
-
 msgid "$iconTitle guidelines"
 msgstr "Directives $iconTitle"
 

diff --git a/locales/it.po b/locales/it.po
@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: simple-icons-website\n"
 "Report-Msgid-Bugs-To: https://github.com/simple-icons/simple-icons-website/issues\n"
 "POT-Creation-Date: 2022-09-26T15:39:06.158Z\n"
-"PO-Revision-Date: 2022-10-02 16:42+0800\n"
+"PO-Revision-Date: 2023-04-05T20:12:22.666Z\n"
 "Last-Translator: @mondeja <https://github.com/mondeja>\n"
 "Language-Team: it <https://github.com/simple-icons>\n"
 "Language: it\n"
@@ -85,9 +85,6 @@ msgstr "Invia una richiesta"
 msgid "$iconTitle SVG"
 msgstr "$iconTitle SVG"
 
-msgid "$iconTitle icon"
-msgstr "$iconTitle icona"
-
 msgid "$iconTitle guidelines"
 msgstr "$iconTitle linee guida"
 

diff --git a/locales/ja-JP.po b/locales/ja-JP.po
@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: simple-icons-website\n"
 "Report-Msgid-Bugs-To: https://github.com/simple-icons/simple-icons-website/issues\n"
 "POT-Creation-Date: 2022-09-26T15:39:06.158Z\n"
-"PO-Revision-Date: 2023-01-16 14:15+0000\n"
+"PO-Revision-Date: 2023-04-05T20:12:22.666Z\n"
 "Last-Translator: @adamrusted <https://github.com/adamrusted>\n"
 "Language-Team: ja-JP <https://github.com/simple-icons>\n"
 "Language: ja-JP\n"
@@ -85,9 +85,6 @@ msgstr "リクエストを提出する"
 msgid "$iconTitle SVG"
 msgstr "$iconTitle SVG"
 
-msgid "$iconTitle icon"
-msgstr "$iconTitle アイコン"
-
 msgid "$iconTitle guidelines"
 msgstr "$iconTitle 鑑札"
 

diff --git a/locales/pt.po b/locales/pt.po
@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: simple-icons-website\n"
 "Report-Msgid-Bugs-To: https://github.com/simple-icons/simple-icons-website/issues\n"
 "POT-Creation-Date: 2022-10-07T19:52:50.250Z\n"
-"PO-Revision-Date: 2022-10-07 22:18+0200\n"
+"PO-Revision-Date: 2023-04-05T20:12:22.666Z\n"
 "Last-Translator: @mondeja <https://github.com/mondeja>\n"
 "Language-Team: pt <https://github.com/simple-icons>\n"
 "Language: pt\n"
@@ -115,9 +115,6 @@ msgstr "Compactar"
 msgid "$iconTitle SVG"
 msgstr "$iconTitle SVG"
 
-msgid "$iconTitle icon"
-msgstr "ícone $iconTitle"
-
 msgid "Removal at $version"
 msgstr "Remoção na $version"
 

diff --git a/locales/zh-CN.po b/locales/zh-CN.po
@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: simple-icons-website\n"
 "Report-Msgid-Bugs-To: https://github.com/simple-icons/simple-icons-website/issues\n"
 "POT-Creation-Date: 2022-09-27T13:42:46.869Z\n"
-"PO-Revision-Date: 2022-10-02 16:42+0800\n"
+"PO-Revision-Date: 2023-04-05T20:12:22.666Z\n"
 "Last-Translator: @LitoMore <https://github.com/LitoMore>\n"
 "Language-Team: zh-CN <https://github.com/simple-icons>\n"
 "Language: zh-CN\n"
@@ -88,9 +88,6 @@ msgstr "提交请求"
 msgid "$iconTitle SVG"
 msgstr "$iconTitle SVG"
 
-msgid "$iconTitle icon"
-msgstr "$iconTitle 图标"
-
 msgid "Deprecated"
 msgstr "已废弃"
 

diff --git a/locales/zh-HK.po b/locales/zh-HK.po
@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: simple-icons-website\n"
 "Report-Msgid-Bugs-To: https://github.com/simple-icons/simple-icons-website/issues\n"
 "POT-Creation-Date: 2022-09-28T13:51:38.923Z\n"
-"PO-Revision-Date: 2022-10-02 16:41+0800\n"
+"PO-Revision-Date: 2023-04-05T20:12:22.666Z\n"
 "Last-Translator: @LitoMore <https://github.com/LitoMore>\n"
 "Language-Team: zh-HK <https://github.com/simple-icons>\n"
 "Language: zh-HK\n"
@@ -88,9 +88,6 @@ msgstr "建立支援服務單"
 msgid "$iconTitle SVG"
 msgstr "$iconTitle SVG"
 
-msgid "$iconTitle icon"
-msgstr "$iconTitle 圖標"
-
 msgid "Deprecated"
 msgstr "已過時（未來將停用）"
 

diff --git a/locales/zh-TW.po b/locales/zh-TW.po
@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: simple-icons-website\n"
 "Report-Msgid-Bugs-To: https://github.com/simple-icons/simple-icons-website/issues\n"
 "POT-Creation-Date: 2022-09-28T14:14:50.054Z\n"
-"PO-Revision-Date: 2022-10-02 16:41+0800\n"
+"PO-Revision-Date: 2023-04-05T20:12:22.666Z\n"
 "Last-Translator: @LitoMore <https://github.com/LitoMore>\n"
 "Language-Team: zh-TW <https://github.com/simple-icons>\n"
 "Language: zh-TW\n"
@@ -88,9 +88,6 @@ msgstr "提交服務單"
 msgid "$iconTitle SVG"
 msgstr "$iconTitle SVG"
 
-msgid "$iconTitle icon"
-msgstr "$iconTitle 圖標"
-
 msgid "Deprecated"
 msgstr "已過時（未來將停用）"
 

diff --git a/public/index.pug b/public/index.pug
@@ -378,11 +378,9 @@ html(lang=lang)
                 title=`${ t_('$iconTitle SVG').replace('$iconTitle', icon.localizedTitle || icon.title) }`,
                 disabled
               )
-                img.icon-preview(
-                  src=`/icons/${icon.slug}.svg`,
-                  loading='lazy',
-                  alt=`${ t_('$iconTitle icon').replace('$iconTitle', icon.localizedTitle || icon.title) }`
-                )
+                //- The images are lazy loaded via Javascript with an IntersectionObserver
+                //- using loading=lazy as fallback for browsers that don't support it.
+                img.icon-preview(d-src=`/icons/${icon.slug}.svg`)
             if icon.deprecatedAt
               span.deprecated
                 span.deprecated__text #{ t_('Deprecated') }

diff --git a/public/scripts/index.js b/public/scripts/index.js
@@ -10,6 +10,11 @@ document.body.classList.remove('no-js');
 const storage = newStorage(localStorage);
 const orderingControls = initOrdering(window, document, storage, domUtils);
 
+const detachedInitIntersectionObserver = async () => {
+  const { default: initIntersectionObserver } = await import('./iobserver.js');
+  initIntersectionObserver(document);
+};
+
 const detachedInitColorScheme = async () => {
   const { default: initColorScheme } = await import('./color-scheme.js');
   initColorScheme(document, storage);
@@ -52,6 +57,7 @@ const detachedInitLanguageSelector = async () => {
 };
 
 (() => {
+  detachedInitIntersectionObserver();
   detachedInitColorScheme();
   detachedInitCopyButtons();
   detachedInitSearch();

diff --git a/public/scripts/iobserver.js b/public/scripts/iobserver.js
@@ -0,0 +1,45 @@
+/**
+ * @fileoverview
+ * Lazy loading of images using an intersection observer.
+ */
+
+export default (document) => {
+  const images = document.querySelectorAll('img[d-src]');
+
+  if ('IntersectionObserver' in window) {
+    const lazyLoad = (target) => {
+      const io = new IntersectionObserver(
+        (entries, observer) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              const img = entry.target;
+              const src = img.getAttribute('d-src');
+              img.onload = () => {
+                img.classList.add('ld');
+              };
+              img.setAttribute('src', src);
+              img.removeAttribute('d-src');
+              observer.disconnect();
+            }
+          });
+        },
+        { threshold: [0], rootMargin: '80px' },
+      );
+
+      io.observe(target);
+    };
+    images.forEach(lazyLoad);
+  } else {
+    // Browser does not support IntersectionObserver,
+    // so we load using the loading=lazy attribute
+    for (const img of images) {
+      const src = img.getAttribute('d-src');
+      img.removeAttribute('d-src');
+      img.onload = () => {
+        img.classList.add('ld');
+      };
+      img.setAttribute('loading', 'lazy');
+      img.setAttribute('src', src);
+    }
+  }
+};
diff --git a/public/stylesheet.css b/public/stylesheet.css
@@ -192,6 +192,15 @@ body.dark .icon-preview {
   filter: invert(1);
 }
 
+.icon-preview {
+  opacity: 0;
+}
+/* Transition when image loaded */
+.icon-preview.ld {
+  opacity: 1;
+  transition: opacity 260ms;
+}
+
 /* General */
 
 body {