lazyloading of images gatsby

Question

When is the large image of an lightbox loaded if the query of the image is in a parent (site) component in gatsby?

• a) with the site?
• b) with the small lightbox component
• c) on click on the small image of the lightbox

- site component
  |- lightbox
    |-large img

// site component queries the images
// lightbox onclick opens  large image

could someone please explain the behaviour and why it it workes like this?

Answer 1

Assuming that you are using gatsby-image-plugin the lazy loading is set by default, which means that if the images are offscreen they are not loaded by the browser until they come into view. To ensure that the layout does not jump around, a placeholder is displayed before the image loads.

So, answering your question, it should be "C" option. The loading property does the trick.