title: How to load all images before showing the page in React?
body: <p>I am trying to find a more modern solution that doesn't use jQuery as I am using React (Gatsbyjs specifically).</p>
  
  <p>I have a website with multiple image carousels that contain high res images.</p>
  
  <p>The issue is the each image carousel only show one image at a time, so only when the user navigates to the next image does the image get fetched, this results in a choppy loading appearance. </p>
  
  <p>I have tried researching online with <code>onLoad</code> and <code>load</code> event listeners but none seem to have worked so far because they only load the image that is currently being shown by the carousel, instead of <strong><em>all of the images</em></strong> in the carousel.</p>
  
  <p>If there is a way to first load all the images, then set the state to true, and only after the state is true, then the rest of the DOM appears onto the screen, that would be perfect.</p>
  
  <p>Any suggestions? Thanks.</p>
  
  <p>Website in question: <a href="https://dev--yachtgamechanger.netlify.com/" rel="nofollow noreferrer">https://dev--yachtgamechanger.netlify.com/</a></p>