title: How to preload images in Gatsby?
body: <p>Is there a way to preload every image before showing the page to a user in Gatsby? Let's say that I want to avoid any preload effect that Gatsby is offering.</p>
  <p>I am also wondering how I can force images that are not visible to preload. This is a major problem which I am trying to solve. Please take a look: <a href="https://festive-bassi-ce307b.netlify.app/" rel="nofollow noreferrer">https://festive-bassi-ce307b.netlify.app/</a>.</p>
  <p>If you try using the carousel then the next image that shows up will start preloading because it never was shown. This is really silly because at that point the whole page is loaded and the images as well.</p>
  <p>I am using the gatsby-plugin-image and it's a staticImage component.</p>
  <p>Example:</p>
  <pre><code>&lt;StaticImage
  className=&quot;img1 img&quot;
  src=&quot;../images/era_of_manufacturing_ilustrations/work_planning.png&quot;
  alt=&quot;work planning image&quot;
  placeholder=&quot;blurred&quot;
  layout=&quot;constrained&quot;
  quality={100}
  /&gt;
  </code></pre>
  <p>I also saw that the older <code>gatsby-image</code> plugin had a &quot;loading&quot; property that you could set to eager load. Could that property solve my problem?</p>