Estoy creando una cartera con Next.js y el recuento de proyectos en la página es lo suficientemente grande. Quiero comenzar a cargar imágenes cuando entren en la ventana gráfica actual. Tal escenario funciona bien con el accesorio de marcador de posición predeterminado de siguiente/imagen.
Estoy usando un componente de marcador de posición personalizado (esqueleto) para mis imágenes (el marcador de posición se oculta cuando se ejecuta onLoadingComplete image prop). Si usé SSR, entonces el algoritmo es claro, pero con SSG llegué a un callejón sin salida.
Estaré encantado de cualquier consejo!
Mi código de componente de imagen:
import Placeholder from './placeholder'; const ImageRenderer = ({ url, alt, layout, objFit, width, height }) => { const [isImageLoaded, setIsImageLoaded] = useState(false); // loading state return ( <> {!isImageLoaded && <Placeholder />} <StyledImage src={url} alt={alt} width={width} height={height} layout={layout} objectFit={objFit} onLoadingComplete={() => setIsImageLoaded(true)} // runs when next/image is loaded /> </> ); };El marcador de posición es solo div con un índice z más alto.
Simplemente puede agregar loading="lazy" a sus imágenes. Es compatible con los navegadores modernos.
Actualización: para videos puedes usar preload="none" .
Debería considerar usar next/image , que de forma predeterminada solo cargará imágenes a medida que ingresan a la ventana gráfica (puede controlar eso a través de la propiedad lazyBoundary ). SSG vs SSR no afecta este comportamiento.