Best way to use a placeholder image and then replace it after the image finishes loading?

user_13158008 0
Viewed 45

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;
}
reactjs javascript
1 Answers

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>
  );
}

See this codesandbox

user_25166730
Related