From db83721ab262a21370d2880837947986401caf4d Mon Sep 17 00:00:00 2001
From: zyxd <zyxd@syncraft.ru>
Date: Thu, 11 Sep 2025 14:36:13 +0400
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=20Image?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/Image.svelte | 73 +++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/lib/components/Image.svelte

diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
new file mode 100644
index 0000000..906dfe0
--- /dev/null
+++ b/src/lib/components/Image.svelte
@@ -0,0 +1,73 @@
+<noscript>
+  <img
+    {loading}
+    {...others}
+  />
+</noscript>
+
+{#if dynamic}
+  <img
+    {loading}
+    {...others}
+    bind:this={node}
+    class="dynamic"
+    class:visible
+  />
+{/if}
+
+<script>
+  let {
+    loading = 'lazy',
+    ...others
+  } = $props()
+
+  let node = $state()
+  let visible = $state(false)
+  let dynamic = $state(false)
+
+  $effect(() => {
+    dynamic = true
+  })
+
+  $effect(() => {
+    if (!node) {
+      return
+    }
+    
+    if (node.complete) {
+      visible = true
+    } else {
+      node.addEventListener('load', () => visible = true, { once: true })
+    }
+  })
+</script>
+
+<style lang="scss">
+  /* 
+    Ideally, <noscript> could use display: contents so it wouldn't create a block container.
+    However, due to a Chrome bug, we must set it to display: block to ensure proper layout.
+    This ensures that fallback images inside <noscript> scale correctly to the container width.
+    https://issues.chromium.org/issues/41179501
+  */
+  noscript,
+  img {
+    display: block;
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+  }
+  
+  img {
+    object-fit: cover;
+    object-position: top center;
+
+    &.dynamic {
+      transition: opacity 0.4s ease;
+      opacity: 0;
+
+      &.visible {
+        opacity: 1;
+      }
+    }
+  }
+</style>
\ No newline at end of file