React JS show component after resources loaded

Question

I'm using React and I have big landing image and I wanted to show the component when the img is ready. You can see this screenshot :

The Content showed but the image still loading. I want it to show when the image is ready. I've already use lazy loading but it doesn't work. Here's my code :

Landing.jsx

import React, { lazy, Suspense } from "react"
import Loading from "./Loading"
const Content = lazy(() => import("./Content"))

export default class Landing extends React.Component {
  render() {
    return (
      <Suspense fallback={<Loading />}>
        <Content />
      </Suspense>
    )
  }
}

the content showed while the image still loading. You can see at the screenshot it still loaded half. — panji gemilang, Sep 03 '19 at 02:46
That could be a long code. It's just a content component, can be anything. If u asking where did I call the img source, it was on my css. — panji gemilang, Sep 03 '19 at 03:06

linkinmedo · Answer 1 · 2019-09-03T05:19:48.947

You can use onLoad to remove the loading screen.

<img src="some/path" alt="hello" onLoad={() => this.setState({isLoading: false})} />

onLoad event will fire when the image is loaded, you can use this concept to create what you want since you can't do that by just using suspense, or you can just use something like react-on-images-loaded.

in your case since it's a background image you can adapt this answer to be used in react.

React JS show component after resources loaded

1 Answers1