loading images above the fold 'eager'

[rare roost]

I am using a CMS with Astro as frontend. Is there way in Astro to check if images are above the fold and load the eager?

[green lodge]

Hi @rare roost. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Astro provides an Image component that optimizes your images and infers width and height based on the original aspect ratio to avoid Cumulative Layout Shift (CLS) source (https://docs.astro.build/en/guides/images/#choosing-image--vs-img). However, the documentation does not explicitly mention a built-in way to check if images are above the fold and load them eagerly.

The loading attribute of the Image component can be set to 'eager' or 'lazy'. By default, it is set to 'lazy' source (https://docs.astro.build/en/reference/image-service-reference/#local-services). If you want to load certain images eagerly, you can manually set the loading attribute to 'eager' for those images.

Here is an example of how to use the Image component with the loading attribute set to 'eager':

<Image src={myImage} alt="" loading="eager" />

Please note that this will not check if the images are above the fold. It will simply load the images as soon as possible, regardless of whether they are in the viewport or not.

If you want to load images eagerly only if they are above the fold, you might need to implement a custom solution using JavaScript. This could involve using the Intersection Observer API to check if the images are in the viewport and then dynamically setting the loading attribute to 'eager' for those images. However, this goes beyond the built-in capabilities of Astro and would require custom client-side JavaScript.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: