diff --git a/src/lib/components/recipes/TitleImgParallax.svelte b/src/lib/components/recipes/TitleImgParallax.svelte index 125d101..909eb06 100644 --- a/src/lib/components/recipes/TitleImgParallax.svelte +++ b/src/lib/components/recipes/TitleImgParallax.svelte @@ -3,14 +3,9 @@ let { src, color = '', alt = "", children } = $props(); - let isloaded = $state(false); let isredirected = $state(false); onMount(() => { - const el = document.querySelector("img") - if(el?.complete){ - isloaded = true - } fetch(src, { method: 'HEAD' }) .then(response => { isredirected = response.redirected @@ -21,9 +16,7 @@ if(isredirected){ return } - if(document.querySelector("img").complete){ - document.querySelector("#img_carousel").showModal(); - } + document.querySelector("#img_carousel").showModal(); } function close_dialog_img(){ document.querySelector("#img_carousel").close(); @@ -95,8 +88,6 @@ position: absolute; top: 0; width: min(1000px, 100dvw); - opacity: 0; - transition: var(--transition-normal); height: max(60dvh,600px); object-fit: cover; object-position: 50% 20%; @@ -112,9 +103,6 @@ :global(h1){ width: 100%; } -.unblur.image{ - opacity: 1; -} /* DIALOG */ dialog{ @@ -155,13 +143,13 @@ dialog button{
-
+
- {isloaded=true}} {alt}/> +
@@ -170,7 +158,7 @@ dialog button{ - +