Actualmente, los mapas estáticos de Google https://developers.google.com/maps/documentation/maps-static/overview tardan demasiado en cargarse, lo que provoca un alto LCP (pintura de contenido grande).
La solución sería cargar una imagen de marcador de posición y luego, una vez que los mapas estáticos de Google IMG hayan terminado de cargarse, reemplazar el marcador de posición con ella. ¿Cuál sería una forma de implementar esto?
Intenté esto pero no reemplazó el marcador de posición y siempre devolvía falso.
function imgLoaded(imgElement) { return imgElement.complete && imgElement.naturalHeight !== 0; }Una solución simple pero efectiva es usar el evento onLoad para actualizar un estado y alternar la visibilidad del marcador de posición, así:
import { useState } from "react"; const LOADING_GIF_URL = `https://i.stack.imgur.com/kOnzy.gif`; const LARGE_IMAGE_URL = `https://upload.wikimedia.org/wikipedia/commons/f/ff/Pizigani_1367_Chart_10MB.jpg`; export default function App() { const [imageLoaded, setImageLoaded] = useState(false); return ( <div> { !imageLoaded ? <img alt="Loading" src={LOADING_GIF_URL} style={{ width: `50px` }} /> : `Clear your cache and refresh the page to reload the image` } <img alt="Large pic" src={LARGE_IMAGE_URL} style={imageLoaded ? {} : { display: `none` }} onLoad={() => setImageLoaded(true)} /> </div> ); }