Currently the google static maps https://developers.google.com/maps/documentation/maps-static/overview takes too long to load which causes a high LCP(large content painting).
The solution would be to load a placeholder image and then once the google static maps IMG is finished loading to replace the placeholder with it. What would be a way to implement this?
I did try this but it didn't replace the placeholder and always returned false.
function imgLoaded(imgElement) {
return imgElement.complete && imgElement.naturalHeight !== 0;
}
A simple but effective solution is to use the onLoad event to update a state and toggle the placeholder visibility, like so:
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>
);
}