Hello, I’m currently working on a landing page that has a LCP hero image that uses a separate image depending on if it’s mobile, tablet, or desktop (not just focal point differences).
I’d like to preload just that viewport’s image, e.x. hero-image-tablet/mobile/desktop. Is there any way to use react-datocms’s { Image } component to achieve this? At the moment, the closest I can get is preloading all 3 rather than just the one. Even hiding the display of the root element still gets those images loaded.
By turning on lazy loading, the loading will be done based on the view port.
We use the Intersection Observer API for lazy loading, that way it only loads elements that are inside the viewport (and from what i understood, that is exactly the behaviour you are looking for)
You can also, if you want to do some conditional rendering or get some more information on what is inside the viewport or not, access the Intersection Observer API and see get the information of what is being seen or not, anywhere in your project.
