how to use OnLoad to show loader when image is loading in react.js

Question

I want to show loader till the time image get loads. I tried but it's not working.

const showLoader = () => {
    return (
      <div className="border-2">
        <Loader />
      </div>
    );
  };

 <img
 className="w-full"
 src={item?.image}
 onClick={() => setId(item?.id)}
 onLoad={() => showLoader()}
  />

onLoad is called after the image gets loaded

umar
– umar

2021-08-17 15:09:40 +00:00
Commented Aug 17, 2021 at 15:09 — umar
– umar, Commented Aug 17, 2021 at 15:09

Dhilip H · Accepted Answer · 2021-08-17 15:11:08Z

12

The onLoad event will be triggered once the image is loaded - https://idiallo.com/javascript/img-detect-loaded

NOTE - Do not conditionally render the img tag. The onLoad event will not be triggered if the img tag does not exist in the DOM. Rather, use the display property to set the loading state

Try this -

function Test() {
  const [loading, setLoading] = useState(true);

  return <>
    <div style={{display: loading ? "block" : "none"}}>
       {showLoader()}
    </div>
    <div style={{display: loading ? "none" : "block"}}>
        <img 
          className="w-full"
          src={item?.image}
          onClick={() => setId(item?.id)}
          onLoad={() => setLoading(false)} />
    </div>
  </>;
}

edited Aug 17, 2021 at 15:11

answered Aug 17, 2021 at 15:05

Dhilip H

6926 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to use OnLoad to show loader when image is loading in react.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related