Is there any way to find out if the page's media files have loaded without using the load event handler?

Question

React

Hello.
Such a thing is that I show the preloader (which is created by react), until the media files are loaded and the responses from the requests come

function App(props){
  const [requestLoading, setRequestLoading] = useState(true);
  const [mediaLoading, setMediaLoading] = useState(true);
  
  useEffect( () => {
    async function setDependences(){
      / some code
    }
    async function setObjects(){
      / some code
    }
    async function checkUser(){
      / some code
    }


    window.addEventListener('load', () => setMediaLoading(false) );
    Promise.all([ setDependences(), setObjects(), checkUser() ])
    .then( () => setRequestLoading(false) );
   
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <Fragment>

      <Preloader loading={ requestLoading || mediaLoading } />
      <Header />
      
      { requestLoading === false ? <Pages /> : false }

    </Fragment>
  );

Pages is shown only after the response from requests and adding data to the storage.
The problem is this:
adding an event handler (load on window) occurs mainly after everything has loaded, and naturally the preloader will not disappear.
What can be done?

I think why this happens does not need to be explained (media is cached)

Answer 1

Wait loadonly if document.readyState is not 'complete'.