Tenemos un GIF de 11 mb en la página de inicio, un poco grande, pero es un requisito comercial. Deseo comenzar a descargar el GIF en segundo plano, mientras se reproduce la página "Cargando", para que cuando se muestre la casa después de 2 segundos, el GIF ya esté descargado (o casi).
¿Cómo debo abordar esto en Next.js? ¿Es ese un parámetro de pirateo que puede resolver esto usando el componente Image ?
Creo que el problema es que, dado que la Image para el GIF solo se declara en la página de inicio, no comenzará a cargarse hasta que Next procese el componente. ¿Cómo puedo superar esto?
Imagen GIF declaración dentro de la casa
<Image src={"/assets/home.gif"} alt="" layout="fill" loading="eager" priority placeholder="blur" blurDataURL="/assets/home_blur.png" />Página principal que mostraba la página de carga antes de la página de inicio
function MainPage(show) { return show ? ( return ( <Home /> )) : ( <Loading /> ); }Tal vez no sea una solución de mejores prácticas, pero pude activarla usando la visibility: hidden;
const divClass = state.firstTime ? styles.hidden : styles.visible; // Declare the image in the loading screen return ( <div className={divClass}> <SlidesDiv> <Image src="/assets/home.gif" height={1000} width={1000} alt="" priority="true" /> </SlidesDiv> </div> ) // In my styles file .hidden { position: absolute; visibility: hidden; } .visible { position: absolute; visibility: visible; }